JSFiddle - React, Tailwind, and code Playground

by thelifeisyours

HTML

<style type="text/css">
  html,
  body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    font-family: Roboto Slab;
  }

  #content-main {
    display: flex;
    flex-flow: column;
    justify-content: center;
    width: 25em;
    border: solid 4px;
    background: rgb(237, 237, 237);
  }

  #header-main {
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: solid 4px;
  }

  #header-img {
    display: block;
  }

  #content-body {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    width: inherit;
    padding: 0.5em;
  }

  #content-img-frame {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.5em;
  }

  #content-img {
    max-width: 70%;
  }

  #content-info {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: space-between;
    max-width: 70%;
  }

  #info-header {
    color: black;
    text-decoration: none;
    font-weight: 900;
    font-size: 1.4em;
  }

  #info-data {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    width: 100%;
    margin-top: 0.5em;
  }

</style>
<div id="content-main">
  <div id="header-main">
    <a href='https://www.dunyahalleri.com/'>
			<img id="header-img" src='https://i.imgur.com/Zhui9oD.png' />
		</a>
  </div>

  <div id="content-body">
    <a id="content-img-frame" href='#'>
			<img id="content-img" src="https://i1.wp.com/www.dunyahalleri.com/wp-content/uploads/2019/01/trung-pham.jpg?resize=559%2C520&ssl=1" />
		</a>
    <div id="content-info">
      <a id="info-header" href='#'>
          Netflix’e göre Fortnite, HBO’dan daha büyük bir rakip
        </a>

      <div id="info-data">
        <div id="info-date">
          19.01.2019 &ensp; &ensp;
        </div>
        <div id="info-readtime">
          20 dakikalık okuma
        </div>
      </div>
    </div>

  </div>
</div>