JSFiddle - React, Tailwind, and code Playground

by ckissi

HTML

<a href="https://blog.markgrowth.com/how-i-grew-my-e-mail-list-to-600-subscribers-without-spending-a-cent-20764a71a638" class="sn-url">
       <div class="sn-left">
            <div class="sn-title">How I Grew My E-Mail List to 600+ Subscribers without Spending a Cent</div>
            <div class="sn-description ">Many marketers consider e-mail marketing the holy grail of online marketing.</div>
            <div class="sn-logo-container">
                <img src="//logo.clearbit.com/https://blog.markgrowth.com?size=22" class="sn-logo" "="">
                <span class="sn-author">Liz Huber • </span><span class="sn-sitename">Medium</span>
            </div>
       </div>
       <div class="sn-image-container">
           <img src="https://miro.medium.com/max/1200/1*4vIIUeMAPypoimtgRc3a9Q.jpeg" class="sn-image">
       </div>
    </a>

CSS

.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-url:hover .sn-title {
                  color: #63b3ed;
                }
                .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: #1a202c;
                }

                .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;
                 ...