@SudhuCodes — A project contributor on SudhuCodes platform.
TailwindCSS — This project belongs to the tailwindcss category.
7/5/2025 — Uploaded to the SudhuCodes project library.
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">45<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 <link11 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>1516<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 <button37 class="text-center w-full px-6 py-2 mt-3 bg-[#5a45ff] hover:bg-[#4230bf] transition duration-500 font-semibold rounded-md">Unlock38 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 SVG43 and PNG Downloads</li>44 <li class="flex items-center gap-3"><i class="fa-solid fa-check pt-1 text-[#5a45ff]"></i>Unlimited45 Background Customizations</li>46 <li class="flex items-center gap-3"><i class="fa-solid fa-check pt-1 text-[#5a45ff]"></i>Real-Time Preview47 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 for49 Saved Designs</li>50 <li class="flex items-center gap-3"><i class="fa-solid fa-check pt-1 text-[#5a45ff]"></i>Regularly Updated51 Design Collections</li>52 <li class="flex items-center gap-3"><i class="fa-solid fa-check pt-1 text-[#5a45ff]"></i>Exclusive Access to53 Premium Generators</li>54 <li class="flex items-center gap-3"><i class="fa-solid fa-check pt-1 text-[#5a45ff]"></i>Commercial Use55 License</li>56 </ul>57 </div>58</body>5960</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.