Modern UI/UX Creative Design Card Built with TailwindCSS

Modern UI/UX Creative Design Card Built with TailwindCSS Project by SudhuCodes Made with TailwindCSS Language

Project Creator

@SudhuCodes — A project contributor on SudhuCodes platform.

Category

TailwindCSS — This project belongs to the tailwindcss category.

Upload Date

7/30/2025 — Uploaded to the SudhuCodes project library.

Project Description

Download free project assets built using tailwindcss. This open-source project is part of the SudhuCodes initiative to support developers and learners.

1<!DOCTYPE html>
2<!-- ------Code with SudhuCodes------ -->
3<html lang="en">
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>SudhuCodes - UI UX Creative Design Card Built with TailwindCSS</title>
8    <script src="https://cdn.tailwindcss.com"></script>
9</head>
10<body class="min-h-screen flex flex-col items-center justify-center">
11
12    <div class="w-64 bg-white rounded-md shadow-[0px_0px_15px_rgba(0,0,0,0.09)] p-9 space-y-3 relative overflow-hidden">
13        <!-- Circle with number -->
14        <div class="w-24 h-24 bg-violet-500 rounded-full absolute -right-5 -top-7">
15          <p class="absolute bottom-6 left-7 text-white text-2xl">02</p>
16        </div>
17        
18        <!-- Icon -->
19        <div class="fill-violet-500 w-12">
20          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
21            <path d="M24,6.928v13.072h-11.5v3h5v1H6.5v-1h5v-3H0V4.5c0-1.379,1.122-2.5,2.5-2.5h12.98c-.253.295-.54.631-.856,1H2.5c-.827,0-1.5.673-1.5,1.5v14.5h22v-10.993l1-1.079Zm-12.749,3.094C19.058.891,19.093.855,19.11.838c1.118-1.115,2.936-1.113,4.052.002,1.114,1.117,1.114,2.936,0,4.052l-8.185,8.828c-.116,1.826-1.623,3.281-3.478,3.281h-5.59l.097-.582c.043-.257,1.086-6.16,5.244-6.396Zm2.749,3.478c0-1.379-1.122-2.5-2.5-2.5-2.834,0-4.018,3.569-4.378,5h4.378c1.378,0,2.5-1.121,2.5-2.5Zm.814-1.073l2.066-2.229c-.332-1.186-1.371-2.057-2.606-2.172-.641.749-1.261,1.475-1.817,2.125,1.117.321,1.998,1.176,2.357,2.277Zm.208-5.276c1.162.313,2.125,1.134,2.617,2.229l4.803-5.18c.737-.741.737-1.925.012-2.653-.724-.725-1.908-.727-2.637,0-.069.08-2.435,2.846-4.795,5.606Z"></path>
22          </svg>
23        </div>
24        
25        <!-- Title and Description -->
26        <h1 class="font-bold text-xl">UI / UX Creative Design</h1>
27        <p class="text-sm text-zinc-500 leading-6">
28          Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse fuga
29          adipisicing elit.
30        </p>
31    </div>      
32
33</body>
34</html>

Live Preview

You're free to use this code for your personal or educational projects. If you use it publicly, consider giving credit to @SudhuCodes.

Want more beginner-friendly and open-source projects like this one? Browse the full library on the SudhuCodes homepage.

Have suggestions or improvements? Contact us or contribute on GitHub.