Simple Article Announcements - Tailwind Component

simple component card article announcements, it is use Tailwind CSS to create this beautiful card tailwind component.
card
Loading component...
index.html
59 lines
<div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4 mx-8 sm:mx-4 xl:mx-auto justify-center my-8">
  <div class="flex flex-col px-2 pt-2 bg-white rounded-xl shadow-xl w-full md:max-w-xl overflow-hidden dark:bg-gray-800">
    <div class="flex-1 items-center mx-auto mt-2">
      <img
        src="https://images.unsplash.com/photo-1541560052-77ec1bbc09f7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bWVkaWElMjBzb2NpYWx8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
        alt="Photo by charlesdeluvio on Unsplash" class="rounded-xl">
    </div>
    <div class="flex-1 px-4 sm:px-4 pt-3">
      <div class="flex flex-col sm:flex-row justify-between ">
        <small class="text-sm text-gray-400 text-justify dark:text-gray-300">By Seline Shenoy</small>
        <small class="text-sm text-gray-400 text-justify dark:text-gray-300">Monday Feb 23, 2022</small>
      </div>
      <h3 class=" text-black text-xl sm:text-2xl font-bold dark:text-gray-50 mt-2">Is Social Media the Bad Guy?
        Redefining Beauty in a Digital World</h3>
      <p class="mt-6 text-gray-700 text-justify dark:text-gray-200">Lorem ipsum, dolor sit amet consectetur adipisicing
        elit. Adipisci, expedita saepe.
        Incidunt ut assumenda a earum nesciunt ullam, non pariatur alias quidem neque suscipit? Libero...</p>
      <div class="flex pt-6 items-center justify-end -mr-12 -mb-5">
        <button
          class="text-sm pr-12 pl-10 pt-2 pb-3 bg-red-600 text-gray-200 hover:text-gray-50 rounded-l-full font-semibold hover:bg-red-700 dark:bg-gray-500 dark:text-gray-100 dark:hover:bg-gray-50 dark:hover:text-gray-700">Read
          more <br>.</button>
      </div>
    </div>
  </div>
  <div class="flex flex-col px-2 w-full md:max-w-xl space-y-4">
    <div class="flex-1 px-4 sm:px-8 pb-8 xl:pb-0 pt-6 bg-white rounded-2xl shadow-xl w-full md:max-w-xl overflow-hidden dark:bg-gray-800">
      <div class="flex flex-col sm:flex-row justify-between ">
        <small class="text-sm text-gray-400 text-justify dark:text-gray-300">By Richard Kensinger</small>
        <small class="text-sm text-gray-400 text-justify dark:text-gray-300">Monday Feb 23, 2022</small>
      </div>
      <h3 class=" text-black text-xl sm:text-2xl font-bold dark:text-gray-50 mt-2">What's Personality Got To Do With Us?
        A Lot</h3>
      <p class="mt-6 text-gray-700 text-justify dark:text-gray-200">Lorem ipsum, dolor sit amet consectetur adipisicing
        elit. Adipisci, expedita saepe.
        Incidunt ut assumenda a earum nesciunt ullam, non pariatur alias quidem neque suscipit? Libero...</p>
    </div>
    <div class="flex-1 px-4 sm:px-8 pb-8 xl:pb-0 pt-6 bg-white rounded-2xl shadow-xl w-full md:max-w-xl overflow-hidden dark:bg-gray-800">
      <div class="flex flex-col sm:flex-row justify-between ">
        <small class="text-sm text-gray-400 text-justify dark:text-gray-300">By Viatcheslav Wlassoff</small>
        <small class="text-sm text-gray-400 text-justify dark:text-gray-300">Monday Feb 23, 2022</small>
      </div>
      <h3 class=" text-black text-xl sm:text-2xl font-bold dark:text-gray-50 mt-2">By Viatcheslav Wlassoff</h3>
      <p class="mt-6 text-gray-700 text-justify dark:text-gray-200">Lorem ipsum, dolor sit amet consectetur adipisicing
        elit. Adipisci, expedita saepe.
        Incidunt ut assumenda a earum nesciunt ullam, non pariatur alias quidem neque suscipit? Libero...</p>
    </div>
    <div class="flex-1 px-4 sm:px-8 pb-8 xl:pb-0 pt-6 bg-white rounded-2xl shadow-xl w-full md:max-w-xl overflow-hidden dark:bg-gray-800">
      <div class="flex flex-col sm:flex-row justify-between ">
        <small class="text-sm text-gray-400 text-justify dark:text-gray-300">By Michael Kapplan</small>
        <small class="text-sm text-gray-400 text-justify dark:text-gray-300">Monday Feb 23, 2022</small>
      </div>
      <h3 class=" text-black text-xl sm:text-2xl font-bold dark:text-gray-50 mt-2">How Facebook Preys on Our Mental
        Health</h3>
      <p class="mt-6 text-gray-700 text-justify dark:text-gray-200">Lorem ipsum, dolor sit amet consectetur adipisicing
        elit. Adipisci, expedita saepe.
        Incidunt ut assumenda a earum nesciunt ullam, non pariatur alias quidem neque suscipit? Libero...</p>
    </div>
  </div>
</div>
Simple Article Announcements - Tailwind Component

Preview - Simple Article Announcements - Tailwind Component
