Blog Componente Funcional
Componentes funcionales Componente con diseño 3D, combinación de colores complementaria, complejidad moderada para blogs, responsivo con soporte para temas oscuros. No hay JS, solo HTML y Tailwind.
Código HTML
<div class="bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<div class="text-center">
<h2 class="text-3xl font-extrabold text-gray-900 dark:text-white sm:text-4xl">
From the Blog
</h2>
<p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 dark:text-gray-400 sm:mt-4">
Explore our latest articles and insights.
</p>
</div>
<div class="mt-12 grid gap-5 lg:grid-cols-3 lg:max-w-none">
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden transform transition-transform hover:scale-105 bg-white dark:bg-gray-800 border border-blue-500 dark:border-yellow-500">
<div class="flex-shrink-0">
<img class="h-48 w-full object-cover" src="https://picsum.photos/seed/blog1/400/300" alt="">
</div>
<div class="flex-1 p-6 flex flex-col justify-between">
<div class="flex-1">
<p class="text-sm font-medium text-blue-600 dark:text-yellow-400">
<a href="#" class="hover:underline">
Article
</a>
</p>
<a href="#" class="block mt-2">
<p class="text-xl font-semibold text-gray-900 dark:text-white">
Boost your conversion rate
</p>
<p class="mt-3 text-base text-gray-500 dark:text-gray-400">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique cum consectetur dicta...
</p>
</a>
</div>
<div class="mt-6 flex items-center">
<div class="flex-shrink-0">
<a href="#">
<span class="sr-only">Roel Aufderhar</span>
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
</a>
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-900 dark:text-white">
<a href="#" class="hover:underline">
Roel Aufderhar
</a>
</p>
<div class="flex space-x-1 text-sm text-gray-500 dark:text-gray-400">
<time datetime="2020-03-16">Mar 16, 2020</time>
<span aria-hidden="true">
·
</span>
<span>
6 min read
</span>
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden transform transition-transform hover:scale-105 bg-white dark:bg-gray-800 border border-blue-500 dark:border-yellow-500">
<div class="flex-shrink-0">
<img class="h-48 w-full object-cover" src="https://picsum.photos/seed/blog2/400/300" alt="">
</div>
<div class="flex-1 p-6 flex flex-col justify-between">
<div class="flex-1">
<p class="text-sm font-medium text-blue-600 dark:text-yellow-400">
<a href="#" class="hover:underline">
Video
</a>
</p>
<a href="#" class="block mt-2">
<p class="text-xl font-semibold text-gray-900 dark:text-white">
How to use search engine optimization to drive traffic to your site
</p>
<p class="mt-3 text-base text-gray-500 dark:text-gray-400">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique cum consectetur dicta...
</p>
</a>
</div>
<div class="mt-6 flex items-center">
<div class="flex-shrink-0">
<a href="#">
<span class="sr-only">Brenna Goyette</span>
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
</a>
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-900 dark:text-white">
<a href="#" class="hover:underline">
Brenna Goyette
</a>
</p>
<div class="flex space-x-1 text-sm text-gray-500 dark:text-gray-400">
<time datetime="2020-03-16">Mar 16, 2020</time>
<span aria-hidden="true">
·
</span>
<span>
6 min read
</span>
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden transform transition-transform hover:scale-105 bg-white dark:bg-gray-800 border border-blue-500 dark:border-yellow-500">
<div class="flex-shrink-0">
<img class="h-48 w-full object-cover" src="https://picsum.photos/seed/blog3/400/300" alt="">
</div>
<div class="flex-1 p-6 flex flex-col justify-between">
<div class="flex-1">
<p class="text-sm font-medium text-blue-600 dark:text-yellow-400">
<a href="#" class="hover:underline">
Case Study
</a>
</p>
<a href="#" class="block mt-2">
<p class="text-xl font-semibold text-gray-900 dark:text-white">
Improve your customer experience
</p>
<p class="mt-3 text-base text-gray-500 dark:text-gray-400">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique cum consectetur dicta...
</p>
</a>
</div>
<div class="mt-6 flex items-center">
<div class="flex-shrink-0">
<a href="#">
<span class="sr-only">Daniela Metz</span>
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/56.jpg" alt="">
</a>
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-900 dark:text-white">
<a href="#" class="hover:underline">
Daniela Metz
</a>
</p>
<div class="flex space-x-1 text-sm text-gray-500 dark:text-gray-400">
<time datetime="2020-03-16">Mar 16, 2020</time>
<span aria-hidden="true">
·
</span>
<span>
6 min read
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
Componentes funcionales Componente
Un componente web que imita a sus homólogos del mundo real en un estilo empresarial-corporativo con una combinación de colores complementaria, un diseño sencillo y un diseño responsivo con soporte para el modo oscuro.
Componentes funcionales Componente
Un componente funcional simple con soporte para modo oscuro.
Componentes funcionales Componente
Un componente de redes sociales diseñado con estilo brutalismo y colores pastel, con una interfaz compleja para interacciones, con soporte para modo oscuro.