Professional Card Design Highlighting Beginner Plans TailwindCSS

Professional Card Design Highlighting Beginner Plans 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 - Professional Card Design Highlighting Beginner Plans TailwindCSS</title>
8    <script src="https://cdn.tailwindcss.com"></script>
9    <script src="https://kit.fontawesome.com/c58add7555.js" crossorigin="anonymous"></script>
10</head>
11<body class="min-h-screen flex flex-col items-center justify-center">
12
13    <div class="w-80 bg-[#111827] text-white px-6 py-10 rounded-md shadow">
14        <p class="text-3xl font-semibold">Beginner</p>
15        <p class="text-6xl font-bold">Free</p>
16        <p class="mt-2 text-[#9ca3af]">Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
17        <ul class="flex flex-col gap-1 mt-5">
18            <li class="flex items-center gap-3">
19                <i class="fa-solid fa-circle-check text-[#a78bfa]"></i>
20                <p class="text-[#9ca3af] text-sm">Responsive design for all devices.</p>
21            </li>
22            <li class="flex items-center gap-3">
23                <i class="fa-solid fa-circle-check text-[#a78bfa]"></i>
24                <p class="text-[#9ca3af] text-sm">Optimized for fast loading times.</p>
25            </li>
26            <li class="flex items-center gap-3">
27                <i class="fa-solid fa-circle-check text-[#a78bfa]"></i>
28                <p class="text-[#9ca3af] text-sm">User-friendly navigation and interface.</p>
29            </li>
30        </ul>
31        
32        <button class="bg-[#a78bfa] hover:bg-[#a78bfae1] transition-all duration-300 w-full py-[10px] mt-10 rounded text-black font-semibold">Get started</button>
33    </div>
34
35</body>
36</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.