پیشنمایش زنده
کد HTML
<div class="flex bg-white w-fit px-1.25 py-1.25 shadow-box-up rounded-2xl dark:bg-box-dark dark:shadow-box-dark-out">
<div class="dark:shadow-buttons-box-dark rounded-2xl w-full px-1.5 py-1.5 md:px-3 md:py-3">
<a title="Go to about me page" class="text-light-blue-light hover:text-black dark:text-gray-400 border-2 inline-flex items-center mr-4 last-of-type:mr-0 p-2.5 border-transparent bg-light-secondary shadow-button-flat-nopressed hover:border-2 hover:shadow-button-flat-pressed focus:opacity-100 focus:outline-none active:border-2 active:shadow-button-flat-pressed font-medium rounded-full text-sm text-center dark:bg-button-curved-default-dark dark:shadow-button-curved-default-dark dark:hover:bg-button-curved-pressed-dark dark:hover:shadow-button-curved-pressed-dark dark:active:bg-button-curved-pressed-dark dark:active:shadow-button-curved-pressed-dark dark:focus:bg-button-curved-pressed-dark dark:focus:shadow-button-curved-pressed-dark dark:border-0">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
</svg>
</a>
</div>
</div>
کد CSS
.mr-4 {
margin-right: 1rem
}
.flex {
display: flex
}
.inline-flex {
display: inline-flex
}
.h-5 {
height: 1.25rem
}
.w-5 {
width: 1.25rem
}
.w-fit {
width: -moz-fit-content;
width: fit-content
}
.w-full {
width: 100%
}
.items-center {
align-items: center
}
.rounded-2xl {
border-radius: 1rem
}
.rounded-full {
border-radius: 9999px
}
.border-2 {
border-width: 2px
}
.border-transparent {
border-color: transparent
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}
.p-2 {
padding: 0.5rem
}
.p-2\.5 {
padding: 0.625rem
}
.px-1 {
padding-left: 0.25rem;
padding-right: 0.25rem
}
.px-1\.5 {
padding-left: 0.375rem;
padding-right: 0.375rem
}
.py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem
}
.py-1\.5 {
padding-top: 0.375rem;
padding-bottom: 0.375rem
}
.text-center {
text-align: center
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem
}
.font-medium {
font-weight: 500
}
.last-of-type\:mr-0:last-of-type {
margin-right: 0px
}
.hover\:border-2:hover {
border-width: 2px
}
.hover\:text-black:hover {
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity))
}
.focus\:opacity-100:focus {
opacity: 1
}
.focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px
}
.active\:border-2:active {
border-width: 2px
}
@media (prefers-color-scheme: dark) {
.dark\:border-0 {
border-width: 0px
}
.dark\:text-gray-400 {
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity))
}
}
@media (min-width: 768px) {
.md\:px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem
}
.md\:py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem
}
}