Skip to content

Instantly share code, notes, and snippets.

@tamimibrahim17

tamimibrahim17/index.html

Created September 27, 2019 06:30
Show Gist options
  • Save tamimibrahim17/e2a9cc4ed1d897fa6177adba17092d21 to your computer and use it in GitHub Desktop.
Save tamimibrahim17/e2a9cc4ed1d897fa6177adba17092d21 to your computer and use it in GitHub Desktop.
Download ZIP
Tailwind CSS pricing panel responsive
Raw
index.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">
Enteprise
</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>
Raw
style.css
/* Only default classes */
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.1.2/tailwind.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment