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