Card Post Article - Tailwind Component

Simple article template with image wrapped in card, it is use Tailwind CSS to create this beautiful card tailwind component.
card
Loading component...
index.html
44 lines
<section class="bg-gray-100 text-gray-800 rounded-lg max-w-screen-lg container py-8 mx-auto mt-8">
  <div class="items-center w-11/12 h-96 mx-auto rounded-lg shadow-lg" style="background-image: url(https://images.unsplash.com/photo-1552083375-1447ce886485?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80);
    background-repeat: no-repat;
    background-size: cover;">
  </div>
  <div class=" bg-white -mt-24 mx-auto items-center w-5/6 z-50 rounded-lg px-4 py-4 shadow-lg">
    <div type="button" class="w-full my-4 sm:w-auto inline-flex items-center justify-center text-white font-medium bg-green-600 rounded-lg 
    shadow-sm py-2 px-5 border border-white border-opacity-10 transform-gpu hover:-translate-y-0.5 transition-all duration-300
    text-sm sm:text-base">
      Enviorment
    </div>
    <h1 class="font-display text-center font-semibold text-3xl sm:text-4xl md:tracking-wide 
    break-words sm:text-left">
      Green plant are going to be Extinct about 500 times faster than they should, study finds
    </h1>
    <div class="select-none flex items-center p-2 sm:p-4">
      <div
        class="flex flex-col w-8 h-8 justify-center items-center mr-4 hover:-translate-y-0.5 transition-all duration-150">
        <div class="block relative">
          <img alt="profil"
            src="https://images.unsplash.com/photo-1600356604581-e573833d02e3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fGdlcm1hbiUyMHdvbWVufGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
            class="mx-auto object-cover rounded-full h-8 w-8" />
        </div>
      </div>
      <div class="flex-1 pl-1 mr-4 sm:mr-16">
        <div class="font-medium">Céline Veldhuizen</div>
        <div class="text-gray-600 text-sm">12 February 2022</div>
      </div>
      <div class="text-gray-600 hover:text-gray-700">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
          <path
            d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.319l4.94 2.47a3 3 0 10.895-1.789l-4.94-2.47a3.027 3.027 0 000-.74l4.94-2.47C13.456 7.68 14.19 8 15 8z" />
        </svg>
      </div>
    </div>
    <div class="bg-gray-200 text-base p-6 mt-4 rounded-xl indent-6 text-justify sm:text-lg">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus iure cum fugiat ipsam est voluptas quasi
      blanditiis debitis nemo repellendus adipisci atque, magni laudantium placeat consequuntur architecto aut autem
      vero saepe, cumque dolore vel eaque facere. Sit voluptatum cupiditate molestiae, debitis ullam velit tempore quae
      sint, repudiandae ipsum sed laborum?
    </div>
  </div>
</section>
<div class="py-4"></div>
Card Post Article - Tailwind Component

Preview - Card Post Article - Tailwind Component
