JSFiddle - React, Tailwind, and code Playground

by kkdaily

HTML

<div class="project">
  <div class="image-container">
    <img height="100%" height="100%" src="https://github.com/biswaroopmukherjee/condensate/raw/master/condensate.gif?raw=true" />
  </div>
  <div class="details">
    <div class="top">
      <span class="title">Condensate</span>
      <p class="description">Interactive GPU-accelerated numerical solutions of the GP equation. Written in C++/CUDA, wrapped in python using SWIG</p>
    </div>
    <div class="bottom">
      <span class="links">
        <a target="_blank" href="https://github.com/biswaroopmukherjee/condensate">github</a>
      </span>
    </div>
  </div>
</div>

CSS

.project {
  height: 200px;
}

.details, .project {
  display: flex;
  margin-bottom: 2em;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.details {
  flex-direction: column;
  margin-left: 1em;
  justify-content: space-between;
}


@media (max-width: 600px) {
  .project {
    flex-direction: column;
  }
}