JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>

<div class="ui raised very padded text container segment">
  <div class="ui three cards">
    <div class="ui fade reveal card">
      <div class="visible content">
        <img src="https://semantic-ui.com/images/wireframe/square-image.png" class="ui small image">
      </div>
      <div class="hidden content">
        <img src="https://semantic-ui.com/images/avatar/large/ade.jpg" class="ui small image">
      </div>
    </div>
    <div class="ui move reveal card">
      <div class="visible content">
        <img src="https://semantic-ui.com/images/wireframe/square-image.png" class="ui small image">
      </div>
      <div class="hidden content">
        <img src="https://semantic-ui.com/images/avatar/large/chris.jpg" class="ui small image">
      </div>
    </div>
    <div class="ui circular rotate reveal card">
      <div class="visible content">
        <img src="https://semantic-ui.com/images/wireframe/square-image.png" class="ui small image">
      </div>
      <div class="hidden content">
        <img src="https://semantic-ui.com/images/avatar/large/stevie.jpg" class="ui small image">
      </div>
    </div>
  </div>  
</div>
<div class="ui raised very padded text container segment">
  <div class="ui small circular rotate left reveal image">
    <img src="https://semantic-ui.com/images/wireframe/square-image.png" class="visible content">
    <img src="https://semantic-ui.com/images/avatar/large/veronika.jpg" class="hidden content">
  </div>
</div>