JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<div class="columns">
    
            <div class="group">
                <h3>Apple</h3>

                <ul>
                    <li><a href="http://www.appleinsider.com/" title="">apple insider</a></li>

                    <li><a href="http://www.apple.com/" title="Makers of hardware">apple.com</a></li>

                    <li><a href="http://desktopmanager.berlios.de/index.php" title="">desktop manager</a></li>

                    <li><a href="http://www.macfixit.com/" title="">macfixit</a></li>

                    <li><a href="http://macnn.com/" title="">MacNN</a></li>

                    <li><a href="http://www.macnyt.dk" title="">macnyt</a></li>

                    <li><a href="http://www.macosxhints.com" title="">macosxhints</a></li>

                    <li><a href="http://macrumors.com/" title="">macrumors</a></li>

                    <li><a href="http://www.mediamac.dk" title="">mediamac</a></li>

                    <li><a href="http://thinksecret.com/" title="">thinksecret</a></li>
                </ul>
            </div>

            <div class="group">
                <h3>Blogs</h3>

                <ul>
                    <li><a href="http://www.cabel.name/" title="Designer at Panic Software">Cabel</a></li>

                    <li><a href="http://deanedwards.me.uk/" title="">Dean Edwards</a></li>

                    <li><a href="http://meyerweb.com/" title="">Eric Meyer</a></li>

                    <li><a href="http://www.snook.ca/" title="">Jonathan Snook</a></li>

                    <li><a href="http://kollaborativ.wordpress.com/" title="Rasmus Lasthein, Thomas Elton &amp; Jens Poder">Kollaborativ</a></li>

                    <li><a href="http://sam.conio.net/" title="">Sam Stephenson</a></li>

                    <li><a href="http://www.shauninman.com/" title="">Shaun Inman</a></li>

                    <li><a href="http://solutoire.com/" title="">Solutoire.com</a></li>

                    <li><a...

CSS

.columns {
  padding: 0;
  margin: 0;
  list-style: none;
  
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-around;
}

.group {
  background: tomato;
  padding: 5px;
  width: 200px;
  margin-top: 10px;
  
  color: white;
}