Logo
Premium Subscription Pricing Card with Tailwind CSS and Feature List

Premium Subscription Pricing Card with Tailwind CSS and Feature List

Premium Subscription Pricing Card with Tailwind CSS and Feature List 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/5/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
5<head>
6 <meta charset="UTF-8">
7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 <title>SudhuCodes - Premium Subscription Pricing Card with Tailwind CSS and Feature List</title>
9 <script src="https://cdn.tailwindcss.com"></script>
10 <link
11 href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap"
12 rel="stylesheet">
13 <script src="https://kit.fontawesome.com/c58add7555.js" crossorigin="anonymous"></script>
14</head>
15
16<body class="font-['IBM_Plex_Sans'] bg-slate-700 min-h-screen flex items-center justify-center">
17 <div class="max-w-[400px] rounded-2xl bg-[#23243A] p-6 text-white md:rounded-lg">
18 <div class="flex items-end justify-between">
19 <div>
20 <p>Monthly</p>
21 </div>
22 <div>
23 <p class="text-2xl -mb-1 text-[#5a45ff]">»</p>
24 </div>
25 <div>
26 <p class="rounded-full bg-gradient-to-tr from-[#5a45ff] to-[#FFC1DA] px-3 py-1 text-xs">20% off</p>
27 <p class="text-zinc-400">Annually</p>
28 </div>
29 </div>
30 <div class="text-center pt-7">
31 <h2 class="text-3xl font-semibold">$50 <span class="text-lg font-normal">/month</span></h2>
32 </div>
33 <div class="text-center py-4">
34 <p class="text-gray-400">Get access to all premium features</p>
35 </div>
36 <button
37 class="text-center w-full px-6 py-2 mt-3 bg-[#5a45ff] hover:bg-[#4230bf] transition duration-500 font-semibold rounded-md">Unlock
38 Pro Creativity</button>
39 <ul class="text-sm flex flex-col gap-1 pt-7">
40 <li class="flex items-center gap-3"><i class="fa-solid fa-check pt-1 text-[#5a45ff]"></i>Access to 50+
41 Website Background Generators</li>
42 <li class="flex items-center gap-3"><i class="fa-solid fa-check pt-1 text-[#5a45ff]"></i>High-Quality SVG
43 and PNG Downloads</li>
44 <li class="flex items-center gap-3"><i class="fa-solid fa-check pt-1 text-[#5a45ff]"></i>Unlimited
45 Background Customizations</li>
46 <li class="flex items-center gap-3"><i class="fa-solid fa-check pt-1 text-[#5a45ff]"></i>Real-Time Preview
47 and Editing Tools</li>
48 <li class="flex items-center gap-3"><i class="fa-solid fa-check pt-1 text-[#5a45ff]"></i>Cloud Storage for
49 Saved Designs</li>
50 <li class="flex items-center gap-3"><i class="fa-solid fa-check pt-1 text-[#5a45ff]"></i>Regularly Updated
51 Design Collections</li>
52 <li class="flex items-center gap-3"><i class="fa-solid fa-check pt-1 text-[#5a45ff]"></i>Exclusive Access to
53 Premium Generators</li>
54 <li class="flex items-center gap-3"><i class="fa-solid fa-check pt-1 text-[#5a45ff]"></i>Commercial Use
55 License</li>
56 </ul>
57 </div>
58</body>
59
60</html>

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.

YouTubeInstagramGitHubTelegramContact

Copyright © 2025 SudhuCodes - All rights reserved.