JSFiddle - React, Tailwind, and code Playground

TwitchRP - Mara Hendricks

by MegaScience

HTML

<div id="main_preview" class="preview">
  <div id="main_preview_graphic" class="preview_graphic" style="background-image: url(&quot;https://i.imgur.com/2LRtQmV.png&quot;);"></div>
  <div id="main_preview_headline" class="preview_headline">Local Man walks with a nice shirt</div>
  <div id="main_preview_description" class="preview_description">In local news, a man walks to his scooter in a nice shirt. Some people are saying this might be the nicest person in the city. Others say he's a menace to every criminal that sets foot within his line of sight. We contacted him and he has this to...</div>
  <div id="main_preview_domain" class="preview_domain">weazelnews.com</div>
</div>

CSS

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
}

.preview {
  width: 476px;
  border: 1px lightgrey solid;
  position: relative;
  padding-bottom: 2.5rem;
}

.preview_graphic {
  height: 209px;
  width: 476px;
  background-size: cover;
  background-position-y: center;
  max-width: 100%;
}

.preview_wrapper {
  word-wrap: break-word;
}

.preview_headline {
  font-family: Georgia, times new roman, Times, serif;
  font-size: 18px;
  color: #1d2129;
  line-height: 22px;
  margin: 0.5rem;
}

.preview_description {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 16px;
  color: #1d2129;
  margin: 0.5rem;
  max-height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preview_domain {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #90949c;
  position: absolute;
  left: 0.5rem;
  bottom: 0.5rem;
  text-transform: uppercase;
}