Blog Funktionale Komponente
Funktionale Komponenten Komponente mit 3D-Design, komplementäres Farbschema, moderate Komplexität für Blogs, reaktionsschnell mit Unterstützung für dunkle Themen. Kein JS, nur HTML und Tailwind.
HTML-Code
<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>Verwandte Komponenten
Komponente "Funktionale Komponenten"
Eine Dashboard-Komponente mit funktionalen Komponenten, die Material-Design-Prinzipien verwenden, ein analoges Farbschema und moderate Komplexität. Die Komponente umfasst Responsive Design und Unterstützung für dunkle Themen mit Tailwind CSS. Es ist kein JavaScript enthalten.
Komponente "Funktionale Komponenten"
Minimalistische Dashboard-Funktionskomponente mit responsivem Design und Unterstützung für dunkle Themen.