JSFiddle - React, Tailwind, and code Playground
by 규연 황
HTML
<div class="grid grid-cols-2 gap-4 md:gap-6 md:grid-cols-3 my-8"><!-- Card - mix-blend-normal --><div class="border-2 border-solarized-red rounded-lg overflow-hidden shadow-lg relative"><div class="relative"><svg class="w-full h-32 bg-solarized-base3 dark:bg-solarized-base03 p-2 saturate-50" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.5" version="1.1" viewBox="0 0 417 417"><path class="stroke-solarized-red" d="m14.406 270.08 54.472 7.935" fill="none" stroke="#839496" stroke-width="15.25px"></path><path class="stroke-solarized-red" d="m10.561 296.48 54.472 7.936" fill="none" stroke="#839496" stroke-width="15.25px"></path><path class="stroke-solarized-red" d="m351.21 319.15 54.895 7.997" fill="none" stroke="#839496" stroke-width="15.25px"></path><path class="stroke-solarized-red" d="m347.36 345.54 54.895 7.997" fill="none" stroke="#839496" stroke-width="15.25px"></path><path class="stroke-solarized-red" d="m148.53 270.89-8.756 60.107" fill="none" stroke="#839496" stroke-width="15.25px"></path><path class="stroke-solarized-red" d="m120.02 278.2 48.294 45.491" fill="none" stroke="#839496" stroke-width="15.25px"></path><path class="stroke-solarized-red" d="m173.78 286.03-59.266 29.822" fill="none" stroke="#839496" stroke-width="15.25px"></path><path class="stroke-solarized-red" d="m277.3 289.65-8.756 60.107" fill="none" stroke="#839496" stroke-width="15.25px"></path><path class="stroke-solarized-red" d="m248.79 296.95 48.294 45.491" fill="none" stroke="#839496" stroke-width="15.25px"></path><path class="stroke-solarized-red" d="m302.55 304.78-59.265 29.823" fill="none" stroke="#839496" stroke-width="15.25px"></path><path class="fill-solarized-red" d="m204.17 340.38c6.019 0.877 10.193 6.476 9.317 12.495-0.877 6.019-6.476 10.194-12.495 9.317s-10.194-6.475-9.317-12.494c0.877-6.02 6.475-10.194 12.495-9.318z" fill="#839496"></path><path class="stroke-solarized-red" d="m97.706 225.28c6.144-9.73 46.522-79.256 46.522-79.256s25.267...CSS
/*! tailwindcss v3.3.1 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}html{-webkit-text-size-adjust:100%;font-feature-settings:normal;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}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...