Simple tailwind landing page content
Today i will share with you a simple tailwind landing page content of section 1. Here you can see some simple feature like a card on the image. make some gradient color etc. So, now time to check the code 👇
<div class="w-full min-h-screen font-sans text-gray-900
bg-gradient-to-br from-transparent to-green-100">
<nav class="flex items-center justify-between px-24 py-8 max-w-screen-xl mx-auto">
<a href="#" class="text-4xl font-bold tracking-wide">Orang<span class="text-green-500">o</span></a>
<div class="flex items-center space-x-14">
<ul class="flex items-center space-x-8">
<li class="font-medium group">
<a href="">Home</a>
<div class="h-0.5 bg-green-300 scale-x-0 group-hover:scale-100 transition-transform origin-left rounded-full
duration-300 ease-out
"></div>
</li>
<li class="font-medium group">
<a href="">Home</a>
<div class="h-0.5 bg-green-300 scale-x-0 group-hover:scale-100 transition-transform origin-left rounded-full
duration-300 ease-out
"></div>
</li>
<li class="font-medium group">
<a href="">Home</a>
<div class="h-0.5 bg-green-300 scale-x-0 group-hover:scale-100 transition-transform origin-left rounded-full
duration-300 ease-out
"></div>
</li>
<li class="font-medium group">
<a href="">Home</a>
<div class="h-0.5 bg-green-300 scale-x-0 group-hover:scale-100 transition-transform origin-left rounded-full
duration-300 ease-out
"></div>
</li>
</ul>
<button class="flex justify-center items-center h-12 px-7 font-medium text-white bg-green-400 rounded-xl
hover:shadow-lg transition-shadow duration-300">Get Started</button>
</div>
</nav>
<div class="flex justify-between px-24 py-8 max-w-screen-xl mx-auto">
<div class="max-w-md relative">
<img class="absolute -top-4 -right-8 w-2/4 h-auto" src="https://github.com/tailwindcollections/tailwind-organic/blob/main/public/img/leaf.png?raw=true" alt="">
<span class="flex items-center px-1 text-xl text-gre">
<span class="font-medium">100% Organic food 🥬</span>
<img src="" alt="">
</span>
<h1 class="pt-4 text-6xl font-bold tracking-tighter leading-tight">Lorem ipsum dolor sit amet
<span class="whitespace-nowrap text-green-400">consectetur</span>
</h1>
<p class="pt-8 text-lg font-normal text-gray-600 leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Ipsam dignissimos magni aliquam assumenda magnam dicta, facilis fuga laborum
</p>
<div class="flex pt-8 space-x-6">
<button class="flex justify-center items-center h-12 px-8 font-medium
bg-green-400 text-white rounded-xl hover:shadow-lg transition-shadow duration-300
">Get Started</button>
<button class="flex justify-center items-center h-12 px-8 font-medium
text-gray-900 border border-gray-900 rounded-xl hover:shadow-lg transition-shadow duration-300
">Explore Menu</button>
</div>
<div class="flex pt-28">
<img src="https://github.com/tailwindcollections/tailwind-organic/blob/main/public/img/chef.png?raw=true" alt="chef" class="h-24 w-24 object-cover">
<div class="pt-5 pl-3">
<div class="text-xl font-bold leading-relaxed">chef of the month</div>
<div class="inline-flex text-gray-600 leading-relaxed ">people loive his cook 🍳</div>
<div class="font-bold text-green-400 leading-relaxed">80+ famous dishes</div>
</div>
</div>
</div>
<div class="flex-1 flex flex-col relative">
<img class=" max-w-xl drop-shadow-2xl self-end" src="https://raw.githubusercontent.com/tailwindcollections/tailwind-organic/main/public/img/dish.png" alt="dishes">
<div class="absolute -right-6 top-32 flex flex-col py-5 px-7 rounded-xl shadow-xl
bg-white/80 backdrop-blur-xl hover:-translate-y-2 hover:shadow-2xl transition-all duration-300">
<div class="flex -space-x-3">
<img src="https://raw.githubusercontent.com/tailwindcollections/tailwind-organic/main/public/img/avatar-1.jpeg" alt="" class="w-12 h-12 rounded-full border-4 border-white
object-cover overflow-hidden">
<img src="https://raw.githubusercontent.com/tailwindcollections/tailwind-organic/main/public/img/avatar-1.jpeg" alt="" class="w-12 h-12 rounded-full border-4 border-white
object-cover overflow-hidden">
<img src="https://raw.githubusercontent.com/tailwindcollections/tailwind-organic/main/public/img/avatar-1.jpeg" alt="" class="w-12 h-12 rounded-full border-4 border-white
object-cover overflow-hidden">
</div>
<div class="pt-3 font-bold">
Happy customer
</div>
<div class="flex items-center text-gray leading-relaxed">
⭐
<span class="pl-1">4.9 (+2.4k Reviews)</span>
</div>
</div>
<div class="absolute left-0 bottom-16 flex rounded-xl shadow-xl
bg-white/80 backdrop-blur-xl hover:-translate-y-2 hover:shadow-2xl transition-all duration-300">
<img class="w-auto h-20 self-end" src="https://raw.githubusercontent.com/tailwindcollections/tailwind-organic/main/public/img/driver.png" alt="">
<div class="pr-6 pl-5 py-5">
<div class="font-bold">fastes delivery</div>
<div class="text-gray-600 leading-relaxed">30 minutes delivery 🚀</div>
</div>
</div>
<div class="flex justify-end space-x-1 font-bold">
<span>Powerd by</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 fill-current" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
<span>tailkitpro</span>
</div>
</div>
</div>
</div>
You can also check the live demo 👉 Tailwind Play