Hero E Learning - Tailwind Component

A jumbotron indicates a big grey box for calling extra attention to some special content or information, it is use Tailwind CSS to create this beautiful jumbotron tailwind component.

jumbotron

Loading component...

index.html

30 lines

<div class="w-full">
  <div class="max-w-5xl sm:mx-auto my-24 mx-4">
    <div
      class="bg-gradient-to-br from-purple-700 via-purple-500 to-red-500 rounded-md rounded-br-[100px] sm:rounded-br-[250px] w-full shadow-md flex flex-wrap flex-col-reverse md:flex-row p-6 sm:p-8">
      <div class="w-full sm:w-2/3 text-center sm:text-left">
        <h1 class="text-3xl sm:text-5xl font-bold text-gray-100 sm:leading-relaxed mt-8">Develop your skills without
          diligence</h1>
        <p class="text-gray-300 text-sm sm:text-base py-4 sm:pr-5">Lorem ipsum dolor sit amet consectetur adipisicing
          elit. Consequuntur similique suscipit aspernatur dignissimos cum, quisquam quam quod facilis molestiae.</p>
        <button
          class="px-6 py-3 bg-pink-500 text-gray-200 mt-4 mb-8 text-base font-medium rounded-md shadow-md hover:bg-pink-600 hover:text-gray-50">Get
          Started</button>
      </div>
      <div class="w-full md:w-1/3">
        <img
          src="https://ouch-cdn2.icons8.com/d_BClx1S3fv815mLTRYo5bg7W-1lCtsneENg5ZNN6NM/rs:fit:256:256/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9wbmcvNDMy/L2MyYTJkZDhiLTg2/N2UtNGJlNi1iOTZj/LWU1ZmRhZmQ4NWQw/ZS5wbmc.png"
          alt="Illustration by Rosina Gavrilash from Ouch!"
          class="mx-auto mt-4 sm:mt-14 sm:w-full transition-transform hover:scale-110 duration-300">
      </div>
    </div>
  </div>
</div>

<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>

Hero E Learning - Tailwind Component

Preview - Hero E Learning - Tailwind Component