پیشنمایش زنده
کد HTML
<div class="group relative w-[380px]">
<div
class="relative overflow-hidden rounded-2xl bg-slate-950 shadow-2xl transition-all duration-300 hover:-translate-y-1 hover:shadow-indigo-500/10"
>
<div
class="absolute -left-16 -top-16 h-32 w-32 rounded-full bg-gradient-to-br from-indigo-500/20 to-purple-500/0 blur-2xl transition-all duration-500 group-hover:scale-150 group-hover:opacity-70"
></div>
<div
class="absolute -right-16 -bottom-16 h-32 w-32 rounded-full bg-gradient-to-br from-purple-500/20 to-indigo-500/0 blur-2xl transition-all duration-500 group-hover:scale-150 group-hover:opacity-70"
></div>
<div class="relative p-6">
<div class="absolute right-6 top-6">
<svg
viewBox="0 0 24 24"
fill="currentColor"
class="h-12 w-12 text-indigo-500/10"
>
<path
d="M14.417 6.679C15.447 7.773 16 9 16 10.989c0 3.5-2.457 6.637-6.03 8.188l-.893-1.378c3.335-1.804 3.987-4.145 4.247-5.621-.537.278-1.24.375-1.929.311C9.591 12.322 8.17 10.841 8.17 9c0-1.657 1.343-3 3-3s3.215.186 3.247.679zm5.498 0C20.945 7.773 21.5 9 21.5 10.989c0 3.5-2.457 6.637-6.03 8.188l-.893-1.378c3.335-1.804 3.987-4.145 4.247-5.621-.537.278-1.24.375-1.929.311C15.091 12.322 13.67 10.841 13.67 9c0-1.657 1.343-3 3-3s3.215.186 3.245.679z"
></path>
</svg>
</div>
<div class="flex items-center gap-1">
<svg
fill="currentColor"
viewBox="0 0 24 24"
class="h-5 w-5 text-amber-400"
>
<path
d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
></path>
</svg>
<svg
fill="currentColor"
viewBox="0 0 24 24"
class="h-5 w-5 text-amber-400"
>
<path
d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
></path>
</svg>
<svg
fill="currentColor"
viewBox="0 0 24 24"
class="h-5 w-5 text-amber-400"
>
<path
d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
></path>
</svg>
<svg
fill="currentColor"
viewBox="0 0 24 24"
class="h-5 w-5 text-amber-400"
>
<path
d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
></path>
</svg>
<svg
fill="currentColor"
viewBox="0 0 24 24"
class="h-5 w-5 text-amber-400"
>
<path
d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
></path>
</svg>
</div>
<div class="mt-4 space-y-2">
<h3 class="text-xl font-semibold text-white">
Outstanding Experience!
</h3>
<p class="text-slate-400">
The attention to detail and premium quality exceeded my expectations.
The customer service was exceptional, and the product arrived earlier
than expected. I'm thoroughly impressed with every aspect of my
purchase.
</p>
</div>
<div class="mt-6 flex items-center gap-4">
<div class="group/avatar relative">
<div
class="absolute -inset-1 rounded-full bg-gradient-to-r from-indigo-500 to-purple-500 opacity-75 blur transition-all duration-300 group-hover/avatar:opacity-100"
></div>
<div
class="relative h-12 w-12 rounded-full bg-slate-950 ring-2 ring-slate-950"
>
<svg
fill="currentColor"
viewBox="0 0 24 24"
class="h-12 w-12 text-indigo-500"
>
<path
d="M7.5 6.5C7.5 8.981 9.519 11 12 11s4.5-2.019 4.5-4.5S14.481 2 12 2 7.5 4.019 7.5 6.5zM20 21h1v-1c0-3.859-3.141-7-7-7h-4c-3.86 0-7 3.141-7 7v1h17z"
></path>
</svg>
</div>
</div>
<div>
<h4 class="font-semibold text-white">Michael Chen</h4>
<p class="text-sm text-slate-400">Senior Developer at TechCorp</p>
</div>
<div class="ml-auto">
<div
class="flex items-center gap-1 rounded-full bg-indigo-500/10 px-3 py-1"
>
<svg
stroke="currentColor"
viewBox="0 0 24 24"
fill="none"
class="h-4 w-4 text-indigo-500"
>
<path
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
stroke-width="2"
stroke-linejoin="round"
stroke-linecap="round"
></path>
</svg>
<span class="text-xs font-medium text-indigo-500">Verified</span>
</div>
</div>
</div>
<div class="mt-6 grid grid-cols-3 gap-4">
<div class="rounded-xl bg-slate-900/50 p-4">
<div class="flex items-center gap-2">
<svg
stroke="currentColor"
viewBox="0 0 24 24"
fill="none"
class="h-5 w-5 text-indigo-500"
>
<path
d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
stroke-width="2"
stroke-linejoin="round"
stroke-linecap="round"
></path>
</svg>
<span class="text-sm font-medium text-white">12</span>
</div>
<p class="mt-1 text-xs text-slate-400">Purchases</p>
</div>
<div class="rounded-xl bg-slate-900/50 p-4">
<div class="flex items-center gap-2">
<svg
stroke="currentColor"
viewBox="0 0 24 24"
fill="none"
class="h-5 w-5 text-indigo-500"
>
<path
d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"
stroke-width="2"
stroke-linejoin="round"
stroke-linecap="round"
></path>
</svg>
<span class="text-sm font-medium text-white">8</span>
</div>
<p class="mt-1 text-xs text-slate-400">Reviews</p>
</div>
<div class="rounded-xl bg-slate-900/50 p-4">
<div class="flex items-center gap-2">
<svg
stroke="currentColor"
viewBox="0 0 24 24"
fill="none"
class="h-5 w-5 text-indigo-500"
>
<path
d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5"
stroke-width="2"
stroke-linejoin="round"
stroke-linecap="round"
></path>
</svg>
<span class="text-sm font-medium text-white">45</span>
</div>
<p class="mt-1 text-xs text-slate-400">Helpful</p>
</div>
</div>
<div class="mt-6 flex items-center justify-between">
<div class="flex items-center gap-2">
<button
class="rounded-lg bg-slate-900 p-2 text-slate-400 transition-colors hover:text-white"
>
<svg
stroke="currentColor"
viewBox="0 0 24 24"
fill="none"
class="h-5 w-5"
>
<path
d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5"
stroke-width="2"
stroke-linejoin="round"
stroke-linecap="round"
></path>
</svg>
</button>
<button
class="rounded-lg bg-slate-900 p-2 text-slate-400 transition-colors hover:text-white"
>
<svg
stroke="currentColor"
viewBox="0 0 24 24"
fill="none"
class="h-5 w-5"
>
<path
d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"
stroke-width="2"
stroke-linejoin="round"
stroke-linecap="round"
></path>
</svg>
</button>
<button
class="rounded-lg bg-slate-900 p-2 text-slate-400 transition-colors hover:text-white"
>
<svg
stroke="currentColor"
viewBox="0 0 24 24"
fill="none"
class="h-5 w-5"
>
<path
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
stroke-width="2"
stroke-linejoin="round"
stroke-linecap="round"
></path>
</svg>
</button>
</div>
<span class="text-sm text-slate-400">Posted 2 days ago</span>
</div>
</div>
</div>
</div>
کد CSS
/* ! tailwindcss v3.4.15 | MIT License | s://tailwindcss.com */
*,
::after,
::before {
box-sizing: border-box;
border-width: 0;
border-style: solid;
border-color: #e5e7eb;
}
::after,
::before {
--tw-content: "";
}
:host,
html {
line-height: 1.5;
-webkit-text-size-adjust: 100%;
-moz-tab-size: 4;
tab-size: 4;
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-feature-settings: normal;
font-variation-settings: normal;
-webkit-tap-highlight-color: transparent;
}
body {
margin: 0;
line-height: inherit;
}
hr {
height: 0;
color: inherit;
border-top-width: 1px;
}
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
a {
color: inherit;
text-decoration: inherit;
}
b,
strong {
font-weight: bolder;
}
code,
kbd,
pre,
samp {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace;
font-feature-settings: normal;
font-variation-settings: normal;
font-size: 1em;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
table {
text-indent: 0;
border-color: inherit;
border-collapse: collapse;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
letter-spacing: inherit;
color: inherit;
margin: 0;
padding: 0;
}
button,
select {
text-transform: none;
}
button,
input:where([type="button"]),
input:where([type="reset"]),
input:where([type="submit"]) {
-webkit-appearance: button;
background-color: transparent;
background-image: none;
}
:-moz-focusring {
outline: auto;
}
:-moz-ui-invalid {
box-shadow: none;
}
progress {
vertical-align: baseline;
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
summary {
display: list-item;
}
blockquote,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre {
margin: 0;
}
fieldset {
margin: 0;
padding: 0;
}
legend {
padding: 0;
}
menu,
ol,
ul {
list-style: none;
margin: 0;
padding: 0;
}
dialog {
padding: 0;
}
textarea {
resize: vertical;
}
input::placeholder,
textarea::placeholder {
opacity: 1;
color: #9ca3af;
}
[role="button"],
button {
cursor: pointer;
}
:disabled {
cursor: default;
}
audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
display: block;
vertical-align: middle;
}
img,
video {
max-width: 100%;
height: auto;
}
[hidden]:where(:not([hidden="until-found"])) {
display: none;
}
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.-inset-1 {
inset: -0.25rem;
}
.-bottom-16 {
bottom: -4rem;
}
.-left-16 {
left: -4rem;
}
.-right-16 {
right: -4rem;
}
.-top-16 {
top: -4rem;
}
.right-6 {
right: 1.5rem;
}
.top-6 {
top: 1.5rem;
}
.ml-auto {
margin-left: auto;
}
.mt-1 {
margin-top: 0.25rem;
}
.mt-4 {
margin-top: 1rem;
}
.mt-6 {
margin-top: 1.5rem;
}
.flex {
display: flex;
}
.grid {
display: grid;
}
.h-12 {
height: 3rem;
}
.h-32 {
height: 8rem;
}
.h-4 {
height: 1rem;
}
.h-5 {
height: 1.25rem;
}
.w-12 {
width: 3rem;
}
.w-32 {
width: 8rem;
}
.w-4 {
width: 1rem;
}
.w-5 {
width: 1.25rem;
}
.w-\[380px\] {
width: 380px;
}
.grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.items-center {
align-items: center;
}
.justify-between {
justify-content: space-between;
}
.gap-1 {
gap: 0.25rem;
}
.gap-2 {
gap: 0.5rem;
}
.gap-4 {
gap: 1rem;
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.overflow-hidden {
overflow: hidden;
}
.rounded-2xl {
border-radius: 1rem;
}
.rounded-full {
border-radius: 9999px;
}
.rounded-lg {
border-radius: 0.5rem;
}
.rounded-xl {
border-radius: 0.75rem;
}
.bg-indigo-500\/10 {
background-color: rgb(99 102 241 / 0.1);
}
.bg-slate-900 {
--tw-bg-opacity: 1;
background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.bg-slate-900\/50 {
background-color: rgb(15 23 42 / 0.5);
}
.bg-slate-950 {
--tw-bg-opacity: 1;
background-color: rgb(2 6 23 / var(--tw-bg-opacity, 1));
}
.bg-gradient-to-br {
background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-r {
background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.from-indigo-500 {
--tw-gradient-from: #6366f1 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-indigo-500\/20 {
--tw-gradient-from: rgb(99 102 241 / 0.2) var(--tw-gradient-from-position);
--tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-500\/20 {
--tw-gradient-from: rgb(168 85 247 / 0.2) var(--tw-gradient-from-position);
--tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-indigo-500\/0 {
--tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position);
}
.to-purple-500 {
--tw-gradient-to: #a855f7 var(--tw-gradient-to-position);
}
.to-purple-500\/0 {
--tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);
}
.p-2 {
padding: 0.5rem;
}
.p-4 {
padding: 1rem;
}
.p-6 {
padding: 1.5rem;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.text-xs {
font-size: 0.75rem;
line-height: 1rem;
}
.font-medium {
font-weight: 500;
}
.font-semibold {
font-weight: 600;
}
.text-amber-400 {
--tw-text-opacity: 1;
color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.text-indigo-500 {
--tw-text-opacity: 1;
color: rgb(99 102 241 / var(--tw-text-opacity, 1));
}
.text-indigo-500\/10 {
color: rgb(99 102 241 / 0.1);
}
.text-slate-400 {
--tw-text-opacity: 1;
color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.opacity-75 {
opacity: 0.75;
}
.shadow-2xl {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.ring-2 {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0
calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
var(--tw-shadow, 0 0 #0000);
}
.ring-slate-950 {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(2 6 23 / var(--tw-ring-opacity, 1));
}
.blur {
--tw-blur: blur(8px);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)
var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-2xl {
--tw-blur: blur(40px);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)
var(--tw-sepia) var(--tw-drop-shadow);
}
.transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-colors {
transition-property:
color,
background-color,
border-color,
fill,
stroke,
-webkit-text-decoration-color;
transition-property: color, background-color, border-color,
text-decoration-color, fill, stroke;
transition-property:
color,
background-color,
border-color,
text-decoration-color,
fill,
stroke,
-webkit-text-decoration-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.duration-300 {
transition-duration: 300ms;
}
.duration-500 {
transition-duration: 500ms;
}
.hover\:-translate-y-1:hover {
--tw-translate-y: -0.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:text-white:hover {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:shadow-indigo-500\/10:hover {
--tw-shadow-color: rgb(99 102 241 / 0.1);
--tw-shadow: var(--tw-shadow-colored);
}
.group:hover .group-hover\:scale-150 {
--tw-scale-x: 1.5;
--tw-scale-y: 1.5;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group\/avatar:hover .group-hover\/avatar\:opacity-100 {
opacity: 1;
}
.group:hover .group-hover\:opacity-70 {
opacity: 0.7;
}