JSFiddle - React, Tailwind, and code Playground

by yuliantoadi

HTML

<ul class="dsgnPgs">
                        <li><h2><a href="" target="_blank">test</a></h2></li>
                        <li><h2><a href="" target="_blank">Catalog</a></h2></li>
                        <li><h2><a href="" target="_blank">Pages</a></h2></li>
                        <li><h2><a href="" target="_blank">Centre</a></h2></li>
                        <li><h2><a href="" target="_blank">Create</a></h2></li>
                        <li><h2><a href="" target="_blank">Create</a></h2></li>
                        <li><h2><a href="" target="_blank">Task</a></h2></li>
                        <li><h2><a href="" target="_blank">test</a></h2></li>
                    </ul>

CSS

.dsgnPgs { margin-top:25px; }
.dsgnPgs li { float:left; width:130px; height:130px; margin-left:10px; margin-bottom:10px; border:1px solid #a6a6a6; background:#e6e6e6; }
.dsgnPgs li:hover { background:#fff; }
.dsgnPgs li h2 { margin:0; padding:0; text-align:center; border:none; }
.dsgnPgs li h2 a { display:block; width:80%; height:70%; padding:20% 10% 10%; }