JSFiddle - React, Tailwind, and code Playground

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<figure>
  <a href="https://upload.wikimedia.org/wikipedia/commons/c/c6/WordPress_PostEdit.png" target="_blank" title="WordPress.org, GPL <http://www.gnu.org/licenses/gpl.html>, via Wikimedia Commons" rel="fancybox">

    <picture>
      <source media="(min-width:1400px)" srcset="https://upload.wikimedia.org/wikipedia/commons/c/c6/WordPress_PostEdit.png">
      <source media="(min-width:800px)" srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c6/WordPress_PostEdit.png/800px-WordPress_PostEdit.png">
      <source media="(min-width:640px)" srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c6/WordPress_PostEdit.png/640px-WordPress_PostEdit.png">
      <source media="(min-width:320px)" srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c6/WordPress_PostEdit.png/320px-WordPress_PostEdit.png">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c6/WordPress_PostEdit.png/320px-WordPress_PostEdit.png" alt="WordPress PostEdit">
    </picture>

  </a>

  <figcaption style="text-align:center;font-size: 12px;">

    <ul class="links">

      <li>
        <a href="https://wordpress.org/" target="_blank" title="WordPress home page">wordpress.org</a>
      </li>

      <li>
        <a href="https://wordpress.org/documentation/" target="_blank" title="WordPress Documentation">documentation</a>
      </li>

      <li>
        <a href="https://en.wikipedia.org/wiki/WordPress" target="_blank" title="WordPress - Wikipedia">Wikipedia</a>
      </li>

      <li>
        <img src="https://s.w.org/style/images/about/WordPress-logotype-simplified.png" alt="WordPress logo">
      </li>

      <li>
        <div class="pretty-button row" title="Install Wordpress">

          <div class="pretty-button-icon column">
            <img...

CSS

html,
body {
  color: #454545;
}


.container {
  margin-top: 5%;
}

.pretty-button {
  background: #F9F9F9;
  border: 1px solid #CCCCCC;
  border-radius: 5px;
  padding: 20px 30px;
  margin: 20px 00px;
  width: 100%;
  cursor: pointer;
}

.pretty-button .pretty-button-icon {
  border-right: 1px solid #CCCCCC;
  width: 10%;
}


.pretty-button .pretty-button-icon img {
  width: auto;
  min-width: 25px;
  max-width: 10%;
}

/* Side By Side */

/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 10px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

figure figcaption img {
  width: 25px;
}

figure figcaption ul li {
  display: inline-block;
}


.pretty-button {
  width: 25%
}