JSFiddle - React, Tailwind, and code Playground

by shivanraptor

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div id="container">
  <ul class="cloud" id="tagcloud">
    <li class="small">performance testing</li>
    <li class="largest">stress testing</li>
    <li class="large">conformance testing</li>
    <li class="medium">acceptane testing</li>
    <li class="small">smoke testing</li>
    <li class="smallest">smoke testing</li>
    <li class="small">performance testing</li>
    <li class="largest">stress testing</li>
    <li class="large">conformance testing</li>
    <li class="medium">acceptane testing</li>
    <li class="small">smoke testing</li>
    <li class="smallest">smoke testing</li>      
  </ul>      
</div>

CSS

#container {
  width: 100%;
  text-align: center;
}

.cloud {
  display: inline;
  list-style-type: none;
  max-width: 60%;
}

.cloud li {
  list-style: none;
  display: inline;
}

#tagcloud .smallest {
  font-size: .8em;
  font-weight: 400;
}

#tagcloud .small {
  font-size: .9em;
  font-weight: 500;
}

#tagcloud .medium {
  font-size: 1em;
  font-weight: 600;
}

#tagcloud .large {
  font-size: 1.3em;
  font-weight: 700;
}

#tagcloud .largest {
  font-size: 1.6em;
  font-weight: 800;
}

/* ---------------------------------------------
    Media Queries
--------------------------------------------- */
/* SM Small devices */
@media(min-width: 576px) {}

/* MD Tablets */
@media (min-width: 768px) {}

/* LG Desktop */
@media (min-width: 992px) {
  .cloud {
    width: 50%;
    margin: auto;
  }
}

/* XL Modern desktop */
@media (min-width: 1200px) {}