JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<body>
<div class="container">
  <section class="profile-list">
    <article class="profile">
      <div class="info">
          <div class="photo">
              <img src="http://iconshow.me/media/images/ui/ios7-icons/png/512/person_1.png">
          </div>
          <div class="desc">
            <p>some information</p>
          </div>
      </div>
      <div class="contacts">
        <p>some contacts here:</p>
        <a href="mailto:xxx">write me!</a><br>
        <a href="mailto:xxx">write me!</a><br>
        <a href="mailto:xxx">write me!</a><br>
        <a href="mailto:xxx">write me!</a><br>
	    <a href="mailto:xxx">write me!</a>
      </div>
    </article>
    <article class="profile">
      <div class="info">
          <div class="photo">
              <img src="http://iconshow.me/media/images/ui/ios7-icons/png/512/person_1.png">
          </div>
          <div class="desc">
            <p>some information</p>
          </div>
      </div>
      <div class="contacts">
        <p>some contacts here:</p>
        <a href="mailto:xxx">write me!</a>
      </div>
    </article>
    <article class="profile">
      <div class="info">
          <div class="photo">
              <img src="http://iconshow.me/media/images/ui/ios7-icons/png/512/person_1.png">
          </div>
          <div class="desc">
            <p>some information</p>
            <p>some information</p>
            <p>some information</p>
            <p>some information</p>
          </div>
      </div>
      <div class="contacts">
        <p>some contacts here:</p>
        <a href="mailto:xxx">write me!</a>
      </div>
    </article>
    <article class="profile">
      <div class="info">
          <div class="photo">
              <img src="http://iconshow.me/media/images/ui/ios7-icons/png/512/person_1.png">
          </div>
          <div class="desc">
            <p>some information</p>
            <p>some information</p>
            <p>some information</p>
            <p>some...

CSS

*{margin:0;padding:0;}
.container{max-width:960px;overflow:hidden;margin: 0 auto}
.profile-list{display:flex;flex-wrap:wrap;margin:0 -10px;}
.profile{margin:0 10px;width:calc(25% - 20px);box-sizing:border-box;background-color:#ddd;padding:10px;display: flex; flex-wrap: wrap; align-content: space-between;}
.photo>img{width:100%;}