پیشنمایش زنده
کد HTML
<ul class="mb-4 mt-4 list-none space-x-1">
<li class="inline-block text-left">
<a
class="relative mb-1 inline-block cursor-pointer select-none overflow-hidden whitespace-nowrap rounded p-2 text-center align-middle text-xs font-medium leading-5 tracking-wide text-slate-800 transition duration-300 ease-linear hover:text-blue-400 hover:shadow-2xl hover:shadow-blue-600"
href=""
>
<span class="sr-only hidden">Twitter</span>
<svg
stroke="currentColor"
fill="currentColor"
aria-label="Twitter"
aria-hidden="true"
viewBox="0 0 24 24"
class="h-8 w-8 fill-current"
>
<g>
<path
d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
></path>
</g>
</svg>
</a>
</li>
</ul>
کد CSS
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.relative {
position: relative;
}
.mb-1 {
margin-bottom: 0.25rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.mt-4 {
margin-top: 1rem;
}
.inline-block {
display: inline-block;
}
.hidden {
display: none;
}
.h-8 {
height: 2rem;
}
.w-8 {
width: 2rem;
}
.cursor-pointer {
cursor: pointer;
}
.select-none {
-webkit-user-select: none;
user-select: none;
}
.list-none {
list-style-type: none;
}
.space-x-1 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0.25rem * var(--tw-space-x-reverse));
margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.overflow-hidden {
overflow: hidden;
}
.whitespace-nowrap {
white-space: nowrap;
}
.rounded {
border-radius: 0.25rem;
}
.fill-current {
fill: currentColor;
}
.p-2 {
padding: 0.5rem;
}
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.align-middle {
vertical-align: middle;
}
.text-xs {
font-size: 0.75rem;
line-height: 1rem;
}
.font-medium {
font-weight: 500;
}
.leading-5 {
line-height: 1.25rem;
}
.tracking-wide {
letter-spacing: 0.025em;
}
.text-slate-800 {
--tw-text-opacity: 1;
color: rgb(30 41 59 / var(--tw-text-opacity));
}
.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;
}
.duration-300 {
transition-duration: 300ms;
}
.ease-linear {
transition-timing-function: linear;
}
.hover\:text-blue-400:hover {
--tw-text-opacity: 1;
color: rgb(96 165 250 / var(--tw-text-opacity));
}
.hover\:shadow-2xl:hover {
--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);
}
.hover\:shadow-blue-600:hover {
--tw-shadow-color: #2563eb;
--tw-shadow: var(--tw-shadow-colored);
}