@SudhuCodes — A project contributor on SudhuCodes platform.
TailwindCSS — This project belongs to the tailwindcss category.
7/4/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 - Hostinger Pricing Table Clone</title>9 <script src="https://cdn.tailwindcss.com"></script>10 <script src="https://kit.fontawesome.com/c58add7555.js" crossorigin="anonymous"></script>11</head>1213<body class="bg-[#fafbff] text-[#2f1c6a] font-sans flex justify-center items-center min-h-screen">14 <div class="p-6 w-full max-w-4xl">15 <h2 class="text-3xl font-bold text-center mb-4 text-[#2f1c6a]">Pick your perfect plan</h2>16 <p class="text-center text-base mb-10 text-[#2f1c6a]">Get started in complete confidence. Our 30-day money-back17 guarantee means it's risk-free.</p>18 <div class="grid grid-cols-2 md:grid-cols-3 gap-4">1920 <!-- Basic Plan Section -->21 <div class="p-6 rounded-xl border border-[#0804ff1e] mt-10">22 <h3 class="text-xl font-semibold text-left mb-4 text-[#2f1c6a]">Single</h3>23 <p class="text-sm py-3 text-[#2f1c6a]">A great solution for beginners</p>24 <p class="my-8"><span class="line-through text-[#6d7081]">₹399.00</span><span25 class="bg-[#d5dfff] font-semibold text-sm rounded-full px-2 py-1 ml-2">SAVE 82%</span></p>26 <div class="text-left my-6">27 <span class="text-gray-400">₹</span>28 <span class="text-4xl font-bold text-[#2f1c6a]">69.00</span>29 <span class="text-gray-400">/mo</span>30 </div>31 <div class="grid text-center pt-9">32 <a href="#"33 class="border-[2px] border-[#673de6] text-[#673de6] font-semibold py-2 px-4 rounded-lg hover:bg-[#ebe4ff] transition duration-300">Choose34 Plan</a>35 </div>36 <p class="text-sm py-4 text-[#6d7081]">₹179.00/mo when you renew</p>37 <hr>38 <ul class="text-sm pt-7 flex flex-col gap-3">39 <li class="flex items-start gap-2"><i class="fa-solid fa-check pt-1 text-green-500"></i>40 <p class="underline underline-offset-4 decoration-dashed"><span class="font-semibold">1</span>41 website</p>42 </li>43 <li class="flex items-start gap-2"><i class="fa-solid fa-check pt-1 text-green-500"></i>44 <p class="underline underline-offset-4 decoration-dashed">Managed WordPress Hosting</p>45 </li>46 <li class="flex items-start gap-2"><i class="fa-solid fa-check pt-1 text-green-500"></i>47 <p><span class="font-semibold">50 GB</span> SSD storage</p>48 </li>49 <li class="flex items-start gap-2"><i class="fa-solid fa-check pt-1 text-green-500"></i>50 <p>Hostinger Website Builder</p>51 </li>52 <li class="flex items-start gap-2"><i class="fa-solid fa-minus pt-1 text-[#2f1c6a]"></i>53 <p class="underline underline-offset-4 decoration-dashed">Free domain (₹749.00 value)</p>54 </li>55 <li class="flex items-start gap-2"><i class="fa-solid fa-check pt-1 text-green-500"></i>56 <p>Free automatic website migration</p>57 </li>58 </ul>59 <div class="flex cursor-pointer items-center text-[#673de6] gap-2 pt-6 justify-center w-full">60 <p class="font-semibold">See all features</p>61 <i class="fa-solid fa-chevron-down pt-[2px]"></i>62 </div>63 </div>6465 <!-- Standard Plan Section (Highlighted) -->66 <div class="rounded-xl border-[2px] border-[#8c85ff]">67 <h2 class="p-2 rounded-t-lg text-center font-semibold text-white mt-[-1px] bg-[#8c85ff]">MOST POPULAR68 </h2>69 <div class="p-6">70 <h3 class="text-xl font-semibold text-left mb-1 text-[#2f1c6a]">Premium</h3>71 <p class="text-sm py-3 mt-4 text-[#2f1c6a]">Everything you need to create your website.</p>72 <p class="my-7 mt-4"><span class="line-through text-[#6d7081]">₹599.00</span><span73 class="bg-[#d5dfff] font-semibold text-sm rounded-full px-2 py-1 ml-2">SAVE 75%</span></p>74 <div class="text-left my-5 mb-3">75 <span class="text-gray-400">₹</span>76 <span class="text-4xl font-bold text-[#2f1c6a]">149.00</span>77 <span class="text-gray-400">/mo</span>78 </div>79 <p class="text-base font-semibold text-[#673de6]">+3 months free</p>80 <div class="grid text-center pt-6">81 <a href="#"82 class="border-[2px] border-[#673de6] bg-[#673de6] text-[#ffff] font-semibold py-2 px-4 rounded-lg hover:bg-[#5126d2] transition duration-300">Choose83 Plan</a>84 </div>85 <p class="text-sm py-4 text-[#6d7081]">₹249.00/mo when you renew</p>86 <hr>87 <ul class="text-sm pt-7 flex flex-col gap-3">88 <li class="flex items-start gap-2"><i class="fa-solid fa-check pt-1 text-green-500"></i>89 <p class="underline underline-offset-4 decoration-dashed"><span90 class="font-semibold">100</span> website</p>91 </li>92 <li class="flex items-start gap-2"><i class="fa-solid fa-check pt-1 text-green-500"></i>93 <p class="underline underline-offset-4 decoration-dashed">Managed WordPress Hosting</p>94 </li>95 <li class="flex items-start gap-2"><i class="fa-solid fa-check pt-1 text-green-500"></i>96 <p><span class="font-semibold">100 GB</span> SSD storage</p>97 </li>98 <li class="flex items-start gap-2"><i class="fa-solid fa-check pt-1 text-green-500"></i>99 <p>Hostinger Website Builder</p>100 </li>101 <li class="flex items-start gap-2"><i class="fa-solid fa-check pt-1 text-green-500"></i>102 <p class="underline underline-offset-4 decoration-dashed">Free domain (₹749.00 value)</p>103 </li>104 <li class="flex items-start gap-2"><i class="fa-solid fa-check pt-1 text-green-500"></i>105 <p>Free automatic website migration</p>106 </li>107 </ul>108 <div class="flex cursor-pointer items-center text-[#673de6] gap-2 pt-6 justify-center w-full">109 <p class="font-semibold">See all features</p>110 <i class="fa-solid fa-chevron-down pt-[2px]"></i>111 </div>112 </div>113 </div>114115 <!-- Premium Plan Section -->116 <div class="p-6 rounded-xl border border-[#0804ff1e] mt-10">117 <h3 class="text-xl font-semibold text-left mb-4 text-[#2f1c6a]">Business</h3>118 <p class="text-sm py-3 text-[#2f1c6a]">Level up with more power and enhanced features.</p>119 <p class="my-6"><span class="line-through text-[#6d7081]">₹699.00</span><span120 class="bg-[#d5dfff] font-semibold text-sm rounded-full px-2 py-1 ml-2">SAVE 64%</span></p>121 <div class="text-left my-5 mb-3">122 <span class="text-gray-400">₹</span>123 <span class="text-4xl font-bold text-[#2f1c6a]">249.00</span>124 <span class="text-gray-400">/mo</span>125 </div>126 <p class="text-base font-semibold text-[#673de6]">+3 months free</p>127 <div class="grid text-center pt-5">128 <a href="#"129 class="border-[2px] border-[#673de6] text-[#673de6] font-semibold py-2 px-4 rounded-lg hover:bg-[#ebe4ff] transition duration-300">Choose130 Plan</a>131 </div>132 <p class="text-sm py-4 text-[#6d7081]">₹499.00/mo when you renew</p>133 <hr>134 <ul class="text-sm pt-7 flex flex-col gap-3">135 <li class="flex items-start gap-2"><i class="fa-solid fa-check pt-1 text-green-500"></i>136 <p class="underline underline-offset-4 decoration-dashed"><span class="font-semibold">100</span>137 website</p>138 </li>139 <li class="flex items-start gap-2"><i class="fa-solid fa-check pt-1 text-green-500"></i>140 <p class="underline underline-offset-4 decoration-dashed">Managed WordPress Hosting</p>141 </li>142 <li class="flex items-start gap-2"><i class="fa-solid fa-check pt-1 text-green-500"></i>143 <p><span class="font-semibold">200 GB</span> SSD storage</p>144 </li>145 <li class="flex items-start gap-2"><i class="fa-solid fa-check pt-1 text-green-500"></i>146 <p>Hostinger Website Builder</p>147 </li>148 <li class="flex items-start gap-2"><i class="fa-solid fa-check pt-1 text-green-500"></i>149 <p class="underline underline-offset-4 decoration-dashed">Free domain (₹749.00 value)</p>150 </li>151 <li class="flex items-start gap-2"><i class="fa-solid fa-check pt-1 text-green-500"></i>152 <p>Free automatic website migration</p>153 </li>154 </ul>155 <div class="flex cursor-pointer items-center text-[#673de6] gap-2 pt-6 justify-center w-full">156 <p class="font-semibold">See all features</p>157 <i class="fa-solid fa-chevron-down pt-[2px]"></i>158 </div>159 </div>160 </div>161 </div>162</body>163164</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.