JSFiddle - React, Tailwind, and code Playground

by aasthatuteja

HTML

<div id="wrapper">
    <ul id="fourbox">
        <li>
            <p>1</p>
        </li>
        <li>
            <p>2</p>
        </li>
        <li>
            <p>3</p>
        </li>
        <li>
            <p>4</p>
        </li>
        <li>
            <p>5</p>
        </li>
        <li>
            <p>6</p>
        </li>
        <li>
            <p>7</p>
        </li>
        <li>
            <p>8</p>
        </li>
    </ul>
</div>

CSS

body {
    margin: 0;
    padding: 0;
}
#wrapper {
    width: 985px;
    min-height: 500px;
    margin: 0 auto;
}
ul #fourbox {
    list-style-type: none;
}
#fourbox li {
    display: inline-block;
    width: 188px;
    height: 213px;
    margin: 15px 10px;
    padding: 15px;
    background: #F1F1F2;
    border: 1px solid #D1D2D4;
    
    box-shadow: 0px 0px 0px #888888;
    transition:all 0.5s ease;
    -webkit-transition:all 0.5s ease;
}
#fourbox li:hover {
    width: 198px;
    height: 228px;
    margin: 5px 5px;
    box-shadow: 0px 7px 10px #888888;
}