Beautiful Team Section Design with Flex & Dark Mode Support Tailwind CSS
Back Tailwind - v3.0 3 years ago 361 35
HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/dist/output.css" rel="stylesheet">
</head>
<body class="p-5 bg-gray-100 dark:bg-slate-800">
<div class="bg-blue-600 dark:bg-slate-800 p-10">
<h2 class="font-bold text-4xl py-20 text-center text-white">
Our Teams
<button class="text-slate-100 dark:text-slate-800 bg-slate-600 dark:bg-slate-100 text-sm p-2"
onclick="toggleMode()">
Change Mode
</button>
</h2>
<div class="flex flex-col md:flex-row flex-wrap">
<div
class="flex-1 bg-white dark:bg-slate-500 p-3 hover:bg-gray-100 transition cursor-pointer hover:-translate-y-6 mb-10">
<div class="bg-teal-500 w-20 h-20 m-auto rounded-full flex justify-center -mt-10">
<h3 class="text-center font-serif font-medium text-4xl m-auto text-white">
01
</h3>
</div>
<div class="py-8 px-6 text-center">
<p class="text-gray-500 dark:text-slate-50 p-4">
Article evident arrived express highest men did boy. Mistress sensible entirely am so. Quick can
manor smart money hopes worth too. Comfort produce husband boy her had hearing. Law others
theirs
passed but wishes. You day real less till dear read less till dear rea.
</p>
<p class="mt-5">
<img src="https://i.ibb.co/QCP76ZW/profile.jpg" alt="" class="w-20 h-20 rounded-full m-auto">
</p>
<h3 class="font-serif mt-3 text-slate-800 dark:text-slate-100 text-3xl font-medium">
Josh Larson
</h3>
<h4 class="font-thin text-slate-500 dark:text-slate-100 mt-3">
CEO & Founder
</h4>
</div>
</div>
<div class="flex-1 bg-gray-200 p-3 hover:bg-gray-300 transition cursor-pointer hover:-translate-y-6 mb-10">
<div class="bg-teal-500 w-20 h-20 m-auto rounded-full flex justify-center -mt-10">
<h3 class="text-center font-serif font-medium text-4xl m-auto text-white">
02
</h3>
</div>
<div class="py-8 px-6 text-center">
<p class="text-gray-500 p-4">
Article evident arrived express highest men did boy. Mistress sensible entirely am so. Quick can
manor smart money hopes worth too. Comfort produce husband boy her had hearing. Law others
theirs
passed but wishes. You day real less till dear read less till dear rea.
</p>
<p class="mt-5">
<img src="https://i.ibb.co/QCP76ZW/profile.jpg" alt="" class="w-20 h-20 rounded-full m-auto">
</p>
<h3 class="font-serif mt-3 text-black text-3xl font-medium">
Josh Larson
</h3>
<h4 class="font-thin text-slate-500 mt-3">
CEO & Founder
</h4>
</div>
</div>
<div
class="flex-1 bg-white dark:bg-slate-500 p-3 hover:bg-gray-100 transition cursor-pointer hover:-translate-y-6 mb-10">
<div class="bg-teal-500 w-20 h-20 m-auto rounded-full flex justify-center -mt-10">
<h3 class="text-center font-serif font-medium text-4xl m-auto text-white dark:hover:text-slate-900">
01
</h3>
</div>
<div class="py-8 px-6 text-center">
<p class="text-gray-500 dark:text-slate-50 p-4">
Article evident arrived express highest men did boy. Mistress sensible entirely am so. Quick can
manor smart money hopes worth too. Comfort produce husband boy her had hearing. Law others
theirs
passed but wishes. You day real less till dear read less till dear rea.
</p>
<p class="mt-5">
<img src="https://i.ibb.co/QCP76ZW/profile.jpg" alt="" class="w-20 h-20 rounded-full m-auto">
</p>
<h3 class="font-serif mt-3 text-slate-800 dark:text-slate-100 text-3xl font-medium">
Josh Larson
</h3>
<h4 class="font-thin text-slate-500 dark:text-slate-100 mt-3">
CEO & Founder
</h4>
</div>
</div>
</div>
</div>
<script>
// On page load or when changing themes, best to add inline in `head` to avoid FOUC
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark')
} else {
document.documentElement.classList.remove('dark')
}
function toggleMode() {
const theme = localStorage.getItem('theme');
if (typeof theme === 'string' && theme === 'dark') {
localStorage.removeItem('theme');
document.documentElement.classList.remove('dark')
} else {
localStorage.setItem('theme', 'dark');
document.documentElement.classList.add('dark')
}
}
</script>
</body>
</html>