JSFiddle - React, Tailwind, and code Playground

by Andrey Izman

HTML

<div role="gridcell" style="width: 286px;">
  <div class="Blockreact__Block-sc-1xf18x6-0 Assetreact__StyledContainer-sc-bnjqwy-0 elqhCm bwCDxg">
    <div height="10" width="auto" class="Blockreact__Block-sc-1xf18x6-0 ewZbdt">
      <div visibility="hidden" width="100%" class="Blockreact__Block-sc-1xf18x6-0 Flexreact__Flex-sc-1twd32i-0 FlexColumnreact__FlexColumn-sc-1wwz3hp-0 VerticalAlignedreact__VerticalAligned-sc-b4hiel-0 CenterAlignedreact__CenterAligned-sc-cjf6mn-0 fiWgVT jYqxGr ksFzlZ iXcsEj cgnEmv">
        <div width="94%" class="Blockreact__Block-sc-1xf18x6-0 Assetreact__StackedCard-sc-bnjqwy-1 ceMtNT fjXMxm"></div>
        <div width="98%" class="Blockreact__Block-sc-1xf18x6-0 Assetreact__StackedCard-sc-bnjqwy-1 eSQjRv fjXMxm"></div>
      </div>
    </div>
    <article class="Assetreact__AssetCard-sc-bnjqwy-2 fXFHnS AssetSearchList--asset" style="width: 286px;"><a class="styles__StyledLink-sc-l6elh8-0 ekTmzq Asset--anchor Asset--placeholder-background">
        <div class="Blockreact__Block-sc-1xf18x6-0 AssetCardContentreact__StyledContainer-sc-a8q9zx-0 dNtdmG egubqN" style="height: 284px; width: 284px;">
          <div class="Blockreact__Block-sc-1xf18x6-0 Flexreact__Flex-sc-1twd32i-0 Skeletonreact__SkeletonBase-sc-9nopaf-3 elqhCm jYqxGr eoxEPs">
            <div class="Skeletonreact__SkeletonBlock-sc-9nopaf-0 kTHBkA"></div>
          </div>
        </div>
        <div class="Blockreact__Block-sc-1xf18x6-0 Flexreact__Flex-sc-1twd32i-0 SpaceBetweenreact__SpaceBetween-sc-jjxyhg-0 AssetCardFooterreact__StyledContainer-sc-nedjig-0 hemYqe jYqxGr gJwgfT cBTfDg">
          <div class="Blockreact__Block-sc-1xf18x6-0 Flexreact__Flex-sc-1twd32i-0 Skeletonreact__SkeletonBase-sc-9nopaf-3 iTSmcq jYqxGr eoxEPs">
            <div class="tmp-placeholder Blockreact__Block-sc-1xf18x6-0 Flexreact__Flex-sc-1twd32i-0 SpaceBetweenreact__SpaceBetween-sc-jjxyhg-0 elqhCm jYqxGr gJwgfT">
              <div height="14px" width="35%"...

CSS

* {
  box-sizing: border-box;
}

.ehQDEl {
    height: 14px;
    width: 50%;
    border-radius: 100px;
}
.dxQzzB {
    height: 14px;
    width: 50%;
    border-radius: inherit;
    background: linear-gradient(to right, rgb(229, 232, 235), rgba(255, 255, 255, 0));
}
.ehQDBf {
    height: 14px;
    width: 25%;
    border-radius: 100px;
}

.eWTpmM {
    height: 14px;
    width: 25%;
    border-radius: inherit;
    background: linear-gradient(to left, rgb(229, 232, 235), rgba(255, 255, 255, 0));
}
.ehQDBe {
    height: 14px;
    width: 35%;
    border-radius: 100px;
}
.fMVbuC {
    height: 14px;
    width: 35%;
    border-radius: inherit;
    background: linear-gradient(to right, rgb(229, 232, 235), rgba(255, 255, 255, 0));
}
.ehQDEm {
    height: 14px;
    width: 20%;
    border-radius: 100px;
}
.eoxhWZ {
    height: 14px;
    width: 20%;
    border-radius: inherit;
    background: linear-gradient(to left, rgb(229, 232, 235), rgba(255, 255, 255, 0));
}
.egubqN {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.dNtdmG {
    position: relative;
}
.eoxEPs {
    flex-direction: column;
    width: 100%;
    height: 100%;
    flex: 1 0 0%;
    border-radius: inherit;
}
.jYqxGr {
    display: flex;
}
.cBTfDg {
    height: 126px;
    width: 100%;
}
.gJwgfT {
    -webkit-box-pack: justify;
    justify-content: space-between;
}
.jYqxGr {
    display: flex;
}
.hemYqe {
    flex-direction: column;
}
.eoxEPs {
    flex-direction: column;
    width: 100%;
    height: 100%;
    flex: 1 0 0%;
    border-radius: inherit;
}
.jYqxGr {
    display: flex;
}
.iTSmcq {
    padding: 12px 16px;
}
.fXFHnS {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: rgb(255, 255, 255);
    position: relative;
    z-index: 2;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(229, 232, 235);
    border-image: initial;
    border-radius: 10px;
}
.kTHBkA {
    height: 100%;
    width: 100%;
    border-radius: inherit;
   ...