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