پیش‌نمایش زنده
کد HTML 
<div
  class="overflow-hidden before:ease-in-out after:ease-in-out bg-white group cursor-pointer relative flex flex-col gap-4 justify-between rounded-2xl border hover:after:w-full border-white-222 hover:border-[#11BE86] duration-300 p-4 md:p-6 px-8 before:h-full before:w-2 hover:before:w-full after:absolute after:top-0 after:left-0 after:h-full after:w-0 after:duration-300 after:opacity-5 after:bg-[url('https://s3-alpha-sig.figma.com/img/6956/4aec/59afa93303a34a23ecc13368dc4094db?Expires=1717977600&amp;Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&amp;Signature=PFrwNwC7QeqlIUsWFsC-jbQzlVTUSh7T5VfJ9vMNaAEsoOS92kRDH-OjWcAX~dmuZ77fPWjZJX0v1kXaZENeqa--USg1BcCN8z~Z1id5y5RQT1ZTU5OR4PRrLISHbowyTAu65h2jCKOSYXCrXN3F6fH8epD-Pm9TCGCYvD9svkhnbTSZxPKZhn8okHm7W~3wWyIhJBaZyQ30qWwD~JAh5r0BRE6XIfIpgTlUWeLq9wwCbwFZQR5RWInuHUfLrfhvAnxmzVVoTO1TxyjHOeXVb68Tc~nJuypwlDmcd0Sg02sJu3-uj7vFXRul6qw0LRfsQrWS5c5RJ~P-z5-eS~1jTA__')] before:duration-300 before:-z-1 before:bg-[#11BE86] before:absolute before:top-0 before:left-0"
>
  <h4
    class="font-medium text-lg duration-300 group-hover:text-white group-hover:z-[5]"
  >
    Hover me to get awesome result
  </h4>
  <a
    class="text-[#1D2825] group-hover:z-[5] font-medium duration-300 group-hover:text-white mt-auto flex items-center gap-2 text-sm xl:text-base"
  >
    More about
    <svg
      class="w-4 h-4"
      stroke="currentColor"
      stroke-width="1.5"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5"
        stroke-linejoin="round"
        stroke-linecap="round"
      ></path>
    </svg>
  </a>
</div>
کد CSS 
.relative{position:relative}.mt-auto{margin-top:auto}.flex{display:flex}.h-4{height:1rem}.w-4{width:1rem}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:0.5rem}.gap-4{gap:1rem}.overflow-hidden{overflow:hidden}.rounded-2xl{border-radius:1rem}.border{border-width:1px}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.p-4{padding:1rem}.px-8{padding-left:2rem;padding-right:2rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-medium{font-weight:500}.text-\[\#1D2825\]{--tw-text-opacity:1;color:rgb(29 40 37 / var(--tw-text-opacity))}.duration-300{transition-duration:300ms}.before\:absolute::before{content:var(--tw-content);position:absolute}.before\:left-0::before{content:var(--tw-content);left:0px}.before\:top-0::before{content:var(--tw-content);top:0px}.before\:h-full::before{content:var(--tw-content);height:100%}.before\:w-2::before{content:var(--tw-content);width:0.5rem}.before\:bg-\[\#11BE86\]::before{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(17 190 134 / var(--tw-bg-opacity))}.before\:duration-300::before{content:var(--tw-content);transition-duration:300ms}.before\:ease-in-out::before{content:var(--tw-content);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.after\:absolute::after{content:var(--tw-content);position:absolute}.after\:left-0::after{content:var(--tw-content);left:0px}.after\:top-0::after{content:var(--tw-content);top:0px}.after\:h-full::after{content:var(--tw-content);height:100%}.after\:w-0::after{content:var(--tw-content);width:0px}.after\:bg-\[url\(\'https\:\/\/s3-alpha-sig\.figma\.com\/img\/6956\/4aec\/59afa93303a34a23ecc13368dc4094db\?Expires\=1717977600\&Key-Pair-Id\=APKAQ4GOSFWCVNEHN3O4\&Signature\=PFrwNwC7QeqlIUsWFsC-jbQzlVTUSh7T5VfJ9vMNaAEsoOS92kRDH-OjWcAX\~dmuZ77fPWjZJX0v1kXaZENeqa--USg1BcCN8z\~Z1id5y5RQT1ZTU5OR4PRrLISHbowyTAu65h2jCKOSYXCrXN3F6fH8epD-Pm9TCGCYvD9svkhnbTSZxPKZhn8okHm7W\~3wWyIhJBaZyQ30qWwD\~JAh5r0BRE6XIfIpgTlUWeLq9wwCbwFZQR5RWInuHUfLrfhvAnxmzVVoTO1TxyjHOeXVb68Tc\~nJuypwlDmcd0Sg02sJu3-uj7vFXRul6qw0LRfsQrWS5c5RJ\~P-z5-eS\~1jTA__\'\)\]::after{content:var(--tw-content);background-image:url('https://s3-alpha-sig.figma.com/img/6956/4aec/59afa93303a34a23ecc13368dc4094db?Expires=1717977600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=PFrwNwC7QeqlIUsWFsC-jbQzlVTUSh7T5VfJ9vMNaAEsoOS92kRDH-OjWcAX~dmuZ77fPWjZJX0v1kXaZENeqa--USg1BcCN8z~Z1id5y5RQT1ZTU5OR4PRrLISHbowyTAu65h2jCKOSYXCrXN3F6fH8epD-Pm9TCGCYvD9svkhnbTSZxPKZhn8okHm7W~3wWyIhJBaZyQ30qWwD~JAh5r0BRE6XIfIpgTlUWeLq9wwCbwFZQR5RWInuHUfLrfhvAnxmzVVoTO1TxyjHOeXVb68Tc~nJuypwlDmcd0Sg02sJu3-uj7vFXRul6qw0LRfsQrWS5c5RJ~P-z5-eS~1jTA__')}.after\:opacity-5::after{content:var(--tw-content);opacity:0.05}.after\:duration-300::after{content:var(--tw-content);transition-duration:300ms}.after\:ease-in-out::after{content:var(--tw-content);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.hover\:border-\[\#11BE86\]:hover{--tw-border-opacity:1;border-color:rgb(17 190 134 / var(--tw-border-opacity))}.hover\:before\:w-full:hover::before{content:var(--tw-content);width:100%}.hover\:after\:w-full:hover::after{content:var(--tw-content);width:100%}.group:hover .group-hover\:z-\[5\]{z-index:5}.group:hover .group-hover\:text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}@media (min-width: 768px){.md\:p-6{padding:1.5rem}}@media (min-width: 1280px){.xl\:text-base{font-size:1rem;line-height:1.5rem}}
نوع: card
تاریخ ایجاد: 2026/06/06
آخرین بروزرسانی: 2026/06/06