JSFiddle - React, Tailwind, and code Playground

by ckissi

HTML

<style>
              .sn-url {
                display: flex;
                width: 100%;
                margin: 2rem 0 2rem 0;
                color: #718096;
                border: 1px solid #edf2f7;
                border-radius: 0.5rem;
                box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
                cursor: pointer;
                text-decoration: none;
              }
              .sn-image {
                position: absolute;
                top: 0;
                left: 0;
                object-fit: cover;
                width: 100%;
                height: 100%;
                border-radius: 0 3px 3px 0;
              }
              .sn-left {
                display: flex;
                align-items: flex-start;
                justify-content: flex-start;
                flex: 1 1 0%;
                flex-direction: column;
                width: 100%;
                min-width: 0;
                padding: 1rem;
                font-family: 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";
              }
              .sn-title {
                font-weight: 600;
                text-align: left;
                color: #63b3ed;
              }
              .sn-description {
                max-height: 48px;
                word-break: break-word;
                -webkit-box-orient: vertical;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                align-items: flex-start;
                justify-content: flex-start;
                margin-top: 0.75rem;
                overflow-y: hidden;
                line-height: 1.25rem;
                text-align: left;
              }
              .sn-logo-container {
                display: flex;
                width: 100%;
                height: 1.5rem;
               ...