پیشنمایش زنده
کد HTML
<div
class="card w-80 h-auto bg-[#07182E] rounded-2xl overflow-hidden relative transition-all duration-300 hover:shadow-[0_0_30px_rgba(0,183,255,0.5)]"
>
<div class="card-content p-4 relative z-10">
<div class="flex items-center mb-4">
<div
class="w-12 h-12 rounded-xl shadow-lg mr-3 border-2 border-white/20 bg-blue-500 flex items-center justify-center text-white font-bold text-[0.6rem] leading-tight"
>
<div class="text-center">UI<br />VERSE</div>
</div>
<div>
<h2 title="SuperApp" class="text-lg font-bold text-white/90 truncate">
SuperApp
</h2>
<span
class="text-xs font-medium px-2 py-0.5 rounded-full mt-1 inline-block bg-green-500/20 text-green-300/90"
>
Available
</span>
</div>
</div>
<div class="mb-4">
<h3 class="text-xs font-semibold text-white/80 mb-2">Core Features</h3>
<div class="flex flex-wrap -mx-1">
<div
class="px-2 py-1 m-0.5 bg-white/10 rounded-full text-xs font-medium text-white/70 shadow-sm border border-white/20 transition-all duration-300 hover:bg-white/20"
>
Real-time Sync
</div>
<div
class="px-2 py-1 m-0.5 bg-white/10 rounded-full text-xs font-medium text-white/70 shadow-sm border border-white/20 transition-all duration-300 hover:bg-white/20"
>
Cloud Backup
</div>
<div
class="px-2 py-1 m-0.5 bg-white/10 rounded-full text-xs font-medium text-white/70 shadow-sm border border-white/20 transition-all duration-300 hover:bg-white/20"
>
Multi-device Support
</div>
<div
class="px-2 py-1 m-0.5 bg-white/10 rounded-full text-xs font-medium text-white/70 shadow-sm border border-white/20 transition-all duration-300 hover:bg-white/20"
>
Offline Mode
</div>
</div>
</div>
<div class="mb-4">
<h3 class="text-xs font-semibold text-white/80 mb-2">Other Features</h3>
<ul class="text-xs text-white/60 grid grid-cols-1 gap-1">
<li class="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
stroke="currentColor"
fill="none"
class="w-3 h-3 mr-1 text-white/70"
>
<path
d="M5 13l4 4L19 7"
stroke-width="2"
stroke-linejoin="round"
stroke-linecap="round"
></path>
</svg>
<span title="Dark Mode" class="truncate">Dark Mode</span>
</li>
<li class="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
stroke="currentColor"
fill="none"
class="w-3 h-3 mr-1 text-white/70"
>
<path
d="M5 13l4 4L19 7"
stroke-width="2"
stroke-linejoin="round"
stroke-linecap="round"
></path>
</svg>
<span title="Custom Themes" class="truncate">Custom Themes</span>
</li>
<li class="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
stroke="currentColor"
fill="none"
class="w-3 h-3 mr-1 text-white/70"
>
<path
d="M5 13l4 4L19 7"
stroke-width="2"
stroke-linejoin="round"
stroke-linecap="round"
></path>
</svg>
<span title="Password Protection" class="truncate"
>Password Protection</span
>
</li>
<li class="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
stroke="currentColor"
fill="none"
class="w-3 h-3 mr-1 text-white/70"
>
<path
d="M5 13l4 4L19 7"
stroke-width="2"
stroke-linejoin="round"
stroke-linecap="round"
></path>
</svg>
<span title="Data Export" class="truncate">Data Export</span>
</li>
<li class="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
stroke="currentColor"
fill="none"
class="w-3 h-3 mr-1 text-white/70"
>
<path
d="M5 13l4 4L19 7"
stroke-width="2"
stroke-linejoin="round"
stroke-linecap="round"
></path>
</svg>
<span title="Widgets" class="truncate">Widgets</span>
</li>
</ul>
</div>
<div class="flex justify-between items-center space-x-2">
<button
class="flex-1 bg-white/10 text-white/90 rounded-lg px-3 py-2 text-xs font-medium transition duration-300 ease-in-out hover:bg-white/20 flex items-center justify-center border border-white/20"
>
<svg
stroke="currentColor"
viewBox="0 0 24 24"
fill="none"
class="h-4 w-4 mr-1"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
stroke-width="2"
stroke-linejoin="round"
stroke-linecap="round"
></path>
</svg>
Help
</button>
<button
class="flex-1 bg-white/20 text-white rounded-lg px-3 py-2 text-xs font-medium transition duration-300 ease-in-out hover:bg-white/30 flex items-center justify-center"
>
<svg
stroke="currentColor"
viewBox="0 0 24 24"
fill="none"
class="h-4 w-4 mr-1"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
stroke-width="2"
stroke-linejoin="round"
stroke-linecap="round"
></path>
</svg>
Download
</button>
</div>
</div>
</div>
کد CSS
.relative{position:relative}.z-10{z-index:10}.m-0\.5{margin:0.125rem}.-mx-1{margin-left:-0.25rem;margin-right:-0.25rem}.mb-2{margin-bottom:0.5rem}.mb-4{margin-bottom:1rem}.mr-1{margin-right:0.25rem}.mr-3{margin-right:0.75rem}.mt-1{margin-top:0.25rem}.inline-block{display:inline-block}.flex{display:flex}.grid{display:grid}.h-12{height:3rem}.h-3{height:0.75rem}.h-4{height:1rem}.h-auto{height:auto}.w-12{width:3rem}.w-3{width:0.75rem}.w-4{width:1rem}.w-80{width:20rem}.flex-1{flex:1 1 0%}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:0.25rem}.space-x-2 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.5rem * var(--tw-space-x-reverse));margin-left:calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))}.overflow-hidden{overflow:hidden}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:0.5rem}.rounded-xl{border-radius:0.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-white\/20{border-color:rgb(255 255 255 / 0.2)}.bg-\[\#07182E\]{--tw-bg-opacity:1;background-color:rgb(7 24 46 / var(--tw-bg-opacity))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246 / var(--tw-bg-opacity))}.bg-green-500\/20{background-color:rgb(34 197 94 / 0.2)}.bg-white\/10{background-color:rgb(255 255 255 / 0.1)}.bg-white\/20{background-color:rgb(255 255 255 / 0.2)}.p-4{padding:1rem}.px-2{padding-left:0.5rem;padding-right:0.5rem}.px-3{padding-left:0.75rem;padding-right:0.75rem}.py-0\.5{padding-top:0.125rem;padding-bottom:0.125rem}.py-1{padding-top:0.25rem;padding-bottom:0.25rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.text-center{text-align:center}.text-\[0\.6rem\]{font-size:0.6rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-xs{font-size:0.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.leading-tight{line-height:1.25}.text-green-300\/90{color:rgb(134 239 172 / 0.9)}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.text-white\/60{color:rgb(255 255 255 / 0.6)}.text-white\/70{color:rgb(255 255 255 / 0.7)}.text-white\/80{color:rgb(255 255 255 / 0.8)}.text-white\/90{color:rgb(255 255 255 / 0.9)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.transition{transition-property:color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.hover\:bg-white\/20:hover{background-color:rgb(255 255 255 / 0.2)}.hover\:bg-white\/30:hover{background-color:rgb(255 255 255 / 0.3)}.hover\:shadow-\[0_0_30px_rgba\(0\2c 183\2c 255\2c 0\.5\)\]:hover{--tw-shadow:0 0 30px rgba(0,183,255,0.5);--tw-shadow-colored:0 0 30px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}