Horizontal Price Plan - Tailwind Component
Simple Horizontal Price Plan for website made with Tailwind CSS.
pricing
Loading component...
319 lines
<section>
<div class="container px-5 py-12 mx-auto lg:px-20 space-y-5">
<div
class="flex flex-wrap items-end justify-start w-full duration-500 ease-in-out transform bg-white border-2 hover:border-4 border-indigo-200 hover:border-indigo-600 rounded-lg shadow-md hover:shadow-2xl transition-transform hover:scale-95 group">
<div class="w-full xl:w-1/4 md:w-1/4 ">
<div class="relative flex flex-col h-full py-8 px-4 text-center md:text-left">
<h2
class="mb-4 text-2xl xl:text-2xl md:text-xl font-bold tracking-widest text-indigo-900 uppercase title-font">
Single Shared Hosting
</h2>
<p
class="flex items-center mb-2 text-lg font-normal tracking-wide text-indigo-800 justify-center md:justify-start">
Ideal solution for beginners
</p>
</div>
</div>
<div class="w-full xl:w-1/4 md:w-1/4">
<div class="relative flex flex-col h-full py-8 px-2">
<p
class="flex items-center mb-2 text-lg font-normal tracking-wide text-indigo-800 justify-center md:justify-start">
<span
class="inline-flex items-center justify-center flex-shrink-0 w-5 h-5 mr-2 text-yellow-500 rounded-full bg-blue-1300">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
class="w-4 h-4" viewBox="0 0 24 24">
<path d="M20 6L9 17l-5-5"></path>
</svg>
</span>
<span class="font-semibold mr-2">1</span> Website
</p>
<p
class="flex items-center mb-2 text-lg font-normal tracking-wide text-indigo-800 justify-center md:justify-start">
<span
class="inline-flex items-center justify-center flex-shrink-0 w-5 h-5 mr-2 text-yellow-500 rounded-full bg-blue-1300">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
class="w-4 h-4" viewBox="0 0 24 24">
<path d="M20 6L9 17l-5-5"></path>
</svg>
</span>
<span class="font-semibold mr-2">30</span> GB SSD
</p>
</p>
<p
class="flex items-center mb-2 text-lg font-normal tracking-wide text-indigo-800 justify-center md:justify-start">
<span
class="inline-flex items-center justify-center flex-shrink-0 w-5 h-5 mr-2 text-yellow-500 rounded-full bg-blue-1300">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
class="w-4 h-4" viewBox="0 0 24 24">
<path d="M20 6L9 17l-5-5"></path>
</svg>
</span>
<span class="font-semibold mr-2">1</span> Email Account
</p>
</div>
</div>
<div class="w-full xl:w-1/4 md:w-1/4">
<div class="relative flex flex-col h-full py-8 px-2 ">
<p
class="flex items-center mb-2 text-lg font-normal tracking-wide text-gray-400 justify-center md:justify-start">
<span
class="inline-flex items-center justify-center flex-shrink-0 w-5 h-5 mr-2 text-red-500 rounded-full bg-blue-1300">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
class="w-4 h-4" viewBox="0 0 24 24">
<path d="M6 18L18 6M6 6l12 12" />
</svg>
</span><span class="font-semibold mr-2">Free</span> Domain
</p>
<p
class="flex items-center mb-2 text-lg font-normal tracking-wide text-gray-400 justify-center md:justify-start">
<span
class="inline-flex items-center justify-center flex-shrink-0 w-5 h-5 mr-2 text-red-500 rounded-full bg-blue-1300">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
class="w-4 h-4" viewBox="0 0 24 24">
<path d="M6 18L18 6M6 6l12 12" />
</svg>
</span><span class="font-semibold mr-2">Google</span> Ads Credit
</p>
<p
class="flex items-center mb-2 text-lg font-normal tracking-wide text-indigo-800 justify-center md:justify-start">
<span
class="inline-flex items-center justify-center flex-shrink-0 w-5 h-5 mr-2 text-indigo-800 rounded-full bg-blue-1300">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
class="w-4 h-4" viewBox="0 0 24 24">
<path d="M20 6L9 17l-5-5"></path>
</svg>
</span>
<span class="font-semibold mr-2">2</span> Databases
</p>
</div>
</div>
<div class="w-full xl:w-1/4 md:w-1/4 lg:ml-auto">
<div class="relative flex flex-col h-full p-8">
<h1 class="flex items-end mx-auto text-5xl lg:text-5xl sm:text-4xl font-black leading-none text-indigo-800 ">
$1.99<span class="text-lg">/mo</span>
</h1>
<button
class="w-full px-4 py-2 mx-auto mt-3 text-indigo-800 border border-indigo-700 rounded-full text-md hover:bg-indigo-700 focus:shadow-outline focus:outline-none focus:ring-2 ring-offset-current ring-offset-2 focus:border-gray-700 focus:bg-indigo-800 hover:text-gray-200">
Buy Now
</button>
<p class="mx-auto mt-4 text-sm text-indigo-800 text-center ">$3.99/mo when you renew</p>
</div>
</div>
</div>
<div
class="flex flex-wrap items-end justify-start w-full duration-500 ease-in-out transform bg-white border-2 hover:border-4 border-indigo-200 hover:border-indigo-600 rounded-lg shadow-md hover:shadow-2xl transition-transform hover:scale-95 group">
<div class="w-full xl:w-1/4 md:w-1/4 ">
<div class="relative flex flex-col h-full py-8 px-4 text-center md:text-left">
<h2
class="mb-4 text-2xl xl:text-2xl md:text-xl font-bold tracking-widest text-indigo-900 uppercase title-font">
Premium Shared Hosting
</h2>
<p
class="flex items-center mb-2 text-lg font-normal tracking-wide text-indigo-800 justify-center md:justify-start">
Perfect package for personal websites
</p>
</div>
</div>
<div class="w-full xl:w-1/4 md:w-1/4">
<div class="relative flex flex-col h-full py-8 px-2">
<p
class="flex items-center mb-2 text-lg font-normal tracking-wide text-indigo-800 justify-center md:justify-start">
<span
class="inline-flex items-center justify-center flex-shrink-0 w-5 h-5 mr-2 text-green-500 rounded-full bg-blue-1300">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
class="w-4 h-4" viewBox="0 0 24 24">
<path d="M20 6L9 17l-5-5"></path>
</svg>
</span>
<span class="font-semibold mr-2">100</span> Website
</p>
<p
class="flex items-center mb-2 text-lg font-normal tracking-wide text-indigo-800 justify-center md:justify-start">
<span
class="inline-flex items-center justify-center flex-shrink-0 w-5 h-5 mr-2 text-yellow-500 rounded-full bg-blue-1300">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
class="w-4 h-4" viewBox="0 0 24 24">
<path d="M20 6L9 17l-5-5"></path>
</svg>
</span>
<span class="font-semibold mr-2">100</span> GB SSD
</p>
</p>
<p
class="flex items-center mb-2 text-lg font-normal tracking-wide text-indigo-800 justify-center md:justify-start">
<span
class="inline-flex items-center justify-center flex-shrink-0 w-5 h-5 mr-2 text-green-500 rounded-full bg-blue-1300">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
class="w-4 h-4" viewBox="0 0 24 24">
<path d="M20 6L9 17l-5-5"></path>
</svg>
</span>
<span class="font-semibold mr-2">Free</span> Email
</p>
</div>
</div>
<div class="w-full xl:w-1/4 md:w-1/4">
<div class="relative flex flex-col h-full py-8 px-2 ">
<p
class="flex items-center mb-2 text-lg font-normal tracking-wide text-indigo-800 justify-center md:justify-start">
<span
class="inline-flex items-center justify-center flex-shrink-0 w-5 h-5 mr-2 text-green-500 rounded-full bg-blue-1300">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
class="w-4 h-4" viewBox="0 0 24 24">
<path d="M20 6L9 17l-5-5"></path>
</svg>
</span><span class="font-semibold mr-2">Free</span> Domain
</p>
<p
class="flex items-center mb-2 text-lg font-normal tracking-wide text-indigo-800 justify-center md:justify-start">
<span
class="inline-flex items-center justify-center flex-shrink-0 w-5 h-5 mr-2 text-green-500 rounded-full bg-blue-1300">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
class="w-4 h-4" viewBox="0 0 24 24">
<path d="M20 6L9 17l-5-5"></path>
</svg>
</span><span class="font-semibold mr-2">Google</span> Ads Credit
</p>
<p
class="flex items-center mb-2 text-lg font-normal tracking-wide text-indigo-800 justify-center md:justify-start">
<span
class="inline-flex items-center justify-center flex-shrink-0 w-5 h-5 mr-2 text-indigo-800 rounded-full bg-blue-1300">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
class="w-4 h-4" viewBox="0 0 24 24">
<path d="M20 6L9 17l-5-5"></path>
</svg>
</span>
<span class="font-semibold mr-2">Unlimited</span> Databases
</p>
</div>
</div>
<div class="w-full xl:w-1/4 md:w-1/4 lg:ml-auto">
<div class="relative flex flex-col h-full p-8">
<h1 class="flex items-end mx-auto text-5xl lg:text-5xl sm:text-4xl font-black leading-none text-indigo-800 ">
$2.99<span class="text-lg">/mo</span>
</h1>
<button
class="w-full px-4 py-2 mx-auto mt-3 text-indigo-800 border border-indigo-700 rounded-full text-md hover:bg-indigo-700 focus:shadow-outline focus:outline-none focus:ring-2 ring-offset-current ring-offset-2 focus:border-gray-700 focus:bg-indigo-800 hover:text-gray-200">
Buy Now
</button>
<p class="mx-auto mt-4 text-sm text-indigo-800 text-center ">$6.99/mo when you renew</p>
</div>
</div>
</div>
<div
class="flex flex-wrap items-end justify-start w-full duration-500 ease-in-out transform bg-white border-2 hover:border-4 border-indigo-200 hover:border-indigo-600 rounded-lg shadow-md hover:shadow-2xl transition-transform hover:scale-95 group">
<div class="w-full xl:w-1/4 md:w-1/4 ">
<div class="relative flex flex-col h-full py-8 px-4 text-center md:text-left">
<h2
class="mb-4 text-2xl xl:text-2xl md:text-xl font-bold tracking-widest text-indigo-900 uppercase title-font">
Business Shared Hosting
</h2>
<p
class="flex items-center mb-2 text-lg font-normal tracking-wide text-indigo-800 justify-center md:justify-start">
Optimized for small businesses
</p>
</div>
</div>
<div class="w-full xl:w-1/4 md:w-1/4">
<div class="relative flex flex-col h-full py-8 px-2">
<p
class="flex items-center mb-2 text-lg font-normal tracking-wide text-indigo-800 justify-center md:justify-start">
<span
class="inline-flex items-center justify-center flex-shrink-0 w-5 h-5 mr-2 text-green-500 rounded-full bg-blue-1300">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
class="w-4 h-4" viewBox="0 0 24 24">
<path d="M20 6L9 17l-5-5"></path>
</svg>
</span>
<span class="font-semibold mr-2">100</span> Website
</p>
<p
class="flex items-center mb-2 text-lg font-normal tracking-wide text-indigo-800 justify-center md:justify-start">
<span
class="inline-flex items-center justify-center flex-shrink-0 w-5 h-5 mr-2 text-green-500 rounded-full bg-blue-1300">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
class="w-4 h-4" viewBox="0 0 24 24">
<path d="M20 6L9 17l-5-5"></path>
</svg>
</span>
<span class="font-semibold mr-2">200</span> GB SSD
</p>
</p>
<p
class="flex items-center mb-2 text-lg font-normal tracking-wide text-indigo-800 justify-center md:justify-start">
<span
class="inline-flex items-center justify-center flex-shrink-0 w-5 h-5 mr-2 text-green-500 rounded-full bg-blue-1300">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
class="w-4 h-4" viewBox="0 0 24 24">
<path d="M20 6L9 17l-5-5"></path>
</svg>
</span>
<span class="font-semibold mr-2">Free</span> Email
</p>
</div>
</div>
<div class="w-full xl:w-1/4 md:w-1/4">
<div class="relative flex flex-col h-full py-8 px-2 ">
<p
class="flex items-center mb-2 text-lg font-normal tracking-wide text-indigo-800 justify-center md:justify-start">
<span
class="inline-flex items-center justify-center flex-shrink-0 w-5 h-5 mr-2 text-green-500 rounded-full bg-blue-1300">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
class="w-4 h-4" viewBox="0 0 24 24">
<path d="M20 6L9 17l-5-5"></path>
</svg>
</span><span class="font-semibold mr-2">Free</span> Domain
</p>
<p
class="flex items-center mb-2 text-lg font-normal tracking-wide text-indigo-800 justify-center md:justify-start">
<span
class="inline-flex items-center justify-center flex-shrink-0 w-5 h-5 mr-2 text-green-500 rounded-full bg-blue-1300">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
class="w-4 h-4" viewBox="0 0 24 24">
<path d="M20 6L9 17l-5-5"></path>
</svg>
</span><span class="font-semibold mr-2">Google</span> Ads Credit
</p>
<p
class="flex items-center mb-2 text-lg font-normal tracking-wide text-indigo-800 justify-center md:justify-start">
<span
class="inline-flex items-center justify-center flex-shrink-0 w-5 h-5 mr-2 text-indigo-800 rounded-full bg-blue-1300">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
class="w-4 h-4" viewBox="0 0 24 24">
<path d="M20 6L9 17l-5-5"></path>
</svg>
</span>
<span class="font-semibold mr-2">Unlimited</span> Databases
</p>
</div>
</div>
<div class="w-full xl:w-1/4 md:w-1/4 lg:ml-auto">
<div class="relative flex flex-col h-full p-8">
<h1 class="flex items-end mx-auto text-5xl lg:text-5xl sm:text-4xl font-black leading-none text-indigo-800 ">
$4.99<span class="text-lg">/mo</span>
</h1>
<button
class="w-full px-4 py-2 mx-auto mt-3 text-indigo-800 border border-indigo-700 rounded-full text-md hover:bg-indigo-700 focus:shadow-outline focus:outline-none focus:ring-2 ring-offset-current ring-offset-2 focus:border-gray-700 focus:bg-indigo-800 hover:text-gray-200">
Buy Now
</button>
<p class="mx-auto mt-4 text-sm text-indigo-800 text-center ">$8.99/mo when you renew</p>
</div>
</div>
</div>
</div>
</section>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');
body {
font-family: 'Poppins', sans-serif;
}
</style>