In this section, we'll create a card with a Neobrutalism UI style using Tailwind CSS. We will see the Raw Edge Card, Harsh Line Card, Vibrant Red Card, and Vibrant Green Card with the Neobrutalist UI Style in Tailwind CSS 3.
Learn Neobrutalism in Web Design with Tailwind CSS A Tutorial
Example 1
Creating a Raw Edge Card with Neobrutalism UI Style Using Tailwind CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Using Tailwind CSS Neobrutalism UI Card </title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="min-h-screen bg-gray-100 flex items-center justify-center">
<div class="border-4 border-gray-700 bg-gray-800 p-6 max-w-sm w-full text-center shadow-xl transform -rotate-3">
<h2 class="text-white text-3xl font-extrabold mb-4">Neobrutalism</h2>
<p class="text-gray-400">
Embracing raw, unpolished design with a disregard for standard
aesthetics.
</p>
</div>
</div>
</body>
</html>
tailwind Neobrutalism ui style card design
Example 2
Creating a Harsh Line Card with Neobrutalism UI Style Using Tailwind CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Using Tailwind CSS Neobrutalism UI Card</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="min-h-screen bg-gray-100 flex items-center justify-center">
<div
class="border-l-8 border-t-2 border-b-2 border-gray-700 bg-gray-800 p-6 max-w-sm w-full text-left shadow-inner"
>
<h2 class="text-white text-3xl font-extrabold mb-4 tracking-tighter">
Raw Design
</h2>
<p class="text-gray-400 leading-tight">
Utilizing minimalistic visuals to create impactful, unconventional
user experiences.
</p>
</div>
</div>
</body>
</html>
tailwind neobrutalism ui card
Example 3
Designing a Neobrutalism UI Style Card with Tailwind CSS Using Border Classes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Using Tailwind CSS Neobrutalism UI Card</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="min-h-screen bg-gray-100 flex items-center justify-center">
<div class="border-2 border-gray-700 bg-transparent p-6 max-w-sm w-full text-center">
<div class="bg-gray-800 p-4">
<h2 class="text-white text-3xl font-extrabold mb-4">Neobrutalist Card</h2>
<p class="text-gray-400">Stripping away unnecessary elements to focus on functionality and raw appeal.</p>
</div>
</div>
</div>
</body>
</html>
Neobrutalism ui card
Example 4
Creating a Vibrant Red Card with Neobrutalism UI Style Using Tailwind CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Using Tailwind CSS Neobrutalism UI Card</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="min-h-screen bg-white flex items-center justify-center">
<div class="border-4 border-red-700 bg-red-900 p-6 max-w-sm w-full text-center shadow-2xl">
<h2 class="text-red-300 text-3xl font-extrabold mb-4">Vibrant Red Card</h2>
<p class="text-red-100">The audacious, in-your-face essence of neobrutalism, uncompromised.</p>
</div>
</div>
</body>
</html>
tailwind vibrant red neobrutalism card
Example 5
Creating a Vibrant Green Card with Neobrutalism UI Style Using Tailwind CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Using Tailwind CSS Neobrutalism UI Card</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="min-h-screen bg-black flex items-center justify-center">
<div class="border-4 border-green-700 bg-green-900 p-6 max-w-sm w-full text-center">
<h2 class="text-green-300 text-3xl font-extrabold mb-4">Raw Vitality</h2>
<p class="text-green-100">A blend of unrefined design aesthetics and stark, attention-grabbing elements.</p>
</div>
</div>
</body>
</html>
tailwind vibrant Neobrutalism card
