Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <section> 
  <div class="container max-w-full mx-auto py-12 px-6">
    <h1 class="text-center text-4xl text-black font-medium leading-snug tracking-wider">
      Pricing
    </h1>
    <p class="text-center text-lg text-gray-700 mt-2 px-6">
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
    </p>
    <div class="h-1 mx-auto bg-indigo-200 w-24 opacity-75 mt-4 rounded"></div>

    <div class="max-w-full md:max-w-6xl mx-auto my-3 md:px-8">
      <div class="relative block flex flex-col md:flex-row items-center">
        <div class="w-11/12 max-w-sm sm:w-3/5 lg:w-1/3 sm:my-5 my-8 relative z-0 rounded-lg shadow-lg md:-mr-4">
          <div class="bg-white text-black rounded-lg shadow-inner shadow-lg overflow-hidden">
            <div class="block text-left text-sm sm:text-md max-w-sm mx-auto mt-2 text-black px-8 lg:px-6">
              <h1 class="text-lg font-medium uppercase p-3 pb-0 text-center tracking-wide">
                Hobby
              </h1>
              <h2 class="text-sm text-gray-500 text-center pb-6">FREE</h2>

              Stripe offers everything needed to run an online business at scale. Get in touch for details.
            </div>

            <div class="flex flex-wrap mt-3 px-6">
              <ul>
                <li class="flex items-center">
                  <div class=" rounded-full p-2 fill-current text-green-700">
                    <svg class="w-6 h-6 align-middle" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
			<path
			d="M22 11.08V12a10 10 0 1 1-5.93-9.14"
			></path>
			<polyline
			points="22 4 12 14.01 9 11.01"
			></polyline>
		</svg>
                  </div>
                  <span class="text-gray-700 text-lg ml-3">No setup</span
	>
</li>
<li class="flex items-center">
	<div
	class=" rounded-full p-2 fill-current text-green-700"
	>
	<svg
	class="w-6 h-6 align-middle"
	width="24"
	height="24"
	viewBox="0 0 24 24"
	fill="none"
	stroke="currentColor"
	stroke-width="2"
	stroke-linecap="round"
	stroke-linejoin="round"
	>
	<path
	d="M22 11.08V12a10 10 0 1 1-5.93-9.14"
	></path>
	<polyline
	points="22 4 12 14.01 9 11.01"
	></polyline>
</svg>
</div>
<span class="text-gray-700 text-lg ml-3"
>No setups</span
>
                </li>
                <li class="flex items-center">
                  <div class=" rounded-full p-2 fill-current text-green-700">
                    <svg class="w-6 h-6 align-middle" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
	<path
	d="M22 11.08V12a10 10 0 1 1-5.93-9.14"
	></path>
	<polyline
	points="22 4 12 14.01 9 11.01"
	></polyline>
</svg>
                  </div>
                  <span class="text-gray-700 text-lg ml-3">Speed</span>
                </li>
              </ul>
            </div>
            <div class="block flex items-center p-8  uppercase">
              <button class="mt-3 text-lg font-semibold 
	bg-black w-full text-white rounded-lg 
	px-6 py-3 block shadow-xl hover:bg-gray-700">
	Select
</button>
            </div>
          </div>
        </div>
        <div class="w-full max-w-md sm:w-2/3 lg:w-1/3 sm:my-5 my-8 relative z-10 bg-white rounded-lg shadow-lg">
          <div class="text-sm leading-none rounded-t-lg bg-gray-200 text-black font-semibold uppercase py-4 text-center tracking-wide">
            Most Popular
          </div>
          <div class="block text-left text-sm sm:text-md max-w-sm mx-auto mt-2 text-black px-8 lg:px-6">
            <h1 class="text-lg font-medium uppercase p-3 pb-0 text-center tracking-wide">
              Expert
            </h1>
            <h2 class="text-sm text-gray-500 text-center pb-6"><span class="text-3xl">€19</span> /mo</h2>

            Stripe offers everything needed to run an online business at scale. Get in touch for details.
          </div>
          <div class="flex pl-12 justify-start sm:justify-start mt-3">
            <ul>
              <li class="flex items-center">
                <div class="rounded-full p-2 fill-current text-green-700">
                  <svg class="w-6 h-6 align-middle" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
			<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
			<polyline points="22 4 12 14.01 9 11.01"></polyline>
		</svg>
                </div>
                <span class="text-gray-700 text-lg ml-3">No setup</span>
              </li>
              <li class="flex items-center">
                <div class=" rounded-full p-2 fill-current text-green-700">
                  <svg class="w-6 h-6 align-middle" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
	<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
	<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
                </div>
                <span class="text-gray-700 text-lg ml-3">Hidden fees</span
>
              </li>
              <li class="flex items-center">
                <div class=" rounded-full p-2 fill-current text-green-700">
                  <svg class="w-6 h-6 align-middle" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
	<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
	<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
                </div>
                <span class="text-gray-700 text-lg ml-3">Original</span>
              </li>
            </ul>
          </div>

          <div class="block flex items-center p-8  uppercase">
            <button class="mt-3 text-lg font-semibold 
	bg-black w-full text-white rounded-lg 
	px-6 py-3 block shadow-xl hover:bg-gray-700">
	Select
</button>
          </div>
        </div>
        <div class="w-11/12 max-w-sm sm:w-3/5 lg:w-1/3 sm:my-5 my-8 relative z-0 rounded-lg shadow-lg md:-ml-4">
          <div class="bg-white text-black rounded-lg shadow-inner shadow-lg overflow-hidden">
            <div class="block text-left text-sm sm:text-md max-w-sm mx-auto mt-2 text-black px-8 lg:px-6">
              <h1 class="text-lg font-medium uppercase p-3 pb-0 text-center tracking-wide">
                Enterprise
              </h1>
              <h2 class="text-sm text-gray-500 text-center pb-6">€39 /mo</h2>

              Stripe offers everything needed to run an online business at scale. Get in touch for details.
            </div>
            <div class="flex flex-wrap mt-3 px-6">
              <ul>
                <li class="flex items-center">
                  <div class=" rounded-full p-2 fill-current text-green-700">
                    <svg class="w-6 h-6 align-middle" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
			<path
			d="M22 11.08V12a10 10 0 1 1-5.93-9.14"
			></path>
			<polyline
			points="22 4 12 14.01 9 11.01"
			></polyline>
		</svg>
                  </div>
                  <span class="text-gray-700 text-lg ml-3">Electric</span
	>
</li>
<li class="flex items-center">
	<div
	class=" rounded-full p-2 fill-current text-green-700"
	>
	<svg
	class="w-6 h-6 align-middle"
	width="24"
	height="24"
	viewBox="0 0 24 24"
	fill="none"
	stroke="currentColor"
	stroke-width="2"
	stroke-linecap="round"
	stroke-linejoin="round"
	>
	<path
	d="M22 11.08V12a10 10 0 1 1-5.93-9.14"
	></path>
	<polyline
	points="22 4 12 14.01 9 11.01"
	></polyline>
</svg>
</div>
<span class="text-gray-700 text-lg ml-3"
>Monthly</span
>
                </li>
                <li class="flex items-center">
                  <div class=" rounded-full p-2 fill-current text-green-700">
                    <svg class="w-6 h-6 align-middle" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
	<path
	d="M22 11.08V12a10 10 0 1 1-5.93-9.14"
	></path>
	<polyline
	points="22 4 12 14.01 9 11.01"
	></polyline>
</svg>
                  </div>
                  <span class="text-gray-700 text-lg ml-3">No setup</span
>
                </li>
              </ul>
            </div>

            <div class="block flex items-center p-8  uppercase">
              <button class="mt-3 text-lg font-semibold 
	bg-black w-full text-white rounded-lg 
	px-6 py-3 block shadow-xl hover:bg-gray-700">
	Select
</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<footer class="pt-4">
  <a href="https://twitter.com/framansi" target="_blank">
  <div class="flex flex-row items-center justify-center">
  <span class="text-center font-sans border-b-2 border-blue-200 hover:text-blue-200">@framansi  </span>
    <svg class="h-5 px-2 cursor-pointer fill-current text-blue-200 hover:text-blue-300" viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M9.4344 24C20.7552 24 26.9472 14.7658 26.9472 6.75787C26.9472 6.49559 26.9472 6.23449 26.9292 5.97457C28.1338 5.11673 29.1736 4.05457 30 2.83781C28.8767 3.32788 27.685 3.64927 26.4648 3.79125C27.7497 3.03391 28.7113 1.84276 29.1708 0.439464C27.9626 1.14533 26.6408 1.64279 25.2624 1.91037C23.3545 -0.0869983 20.3229 -0.575862 17.8675 0.717909C15.4121 2.01168 14.1435 4.76633 14.7732 7.43721C9.82427 7.19294 5.21337 4.89156 2.088 1.1058C0.454347 3.87471 1.28879 7.41696 3.9936 9.19521C3.01409 9.16663 2.05594 8.90648 1.2 8.43672C1.2 8.46153 1.2 8.48752 1.2 8.51351C1.2008 11.3981 3.2661 13.8827 6.138 14.4539C5.23184 14.6972 4.2811 14.7327 3.3588 14.5578C4.16514 17.0264 6.47589 18.7175 9.1092 18.7662C6.92968 20.4526 4.23727 21.3681 1.4652 21.3654C0.975484 21.3644 0.486245 21.3352 0 21.2779C2.81476 23.0563 6.0899 23.9997 9.4344 23.9953" ></path>
                                        </svg> 
  </div>
    </a>
</footer>
              
            
!

CSS

              
                /* Only default classes */
              
            
!

JS

              
                
              
            
!
999px

Console