JSFiddle - React, Tailwind, and code Playground

by jt3k

HTML

<ul>
    <li>
        <div>lalala</div>
    </li>
    <li>
        <div>lalala</div>
    </li>
    <li>
        <div>lalala</div>
    </li>
    <li>
        <div>lalala</div>
    </li>
    <li>
        <div>lalala</div>
    </li>
    <li>
        <div>lalala</div>
    </li>
    <li>
        <div>lalala</div>
    </li>
    <li>
        <div>lalala</div>
    </li>
    <li>
        <div>lalala</div>
    </li>
    <li>
        <div>lalala</div>
    </li>
    <li>
        <div>lalala</div>
    </li>
    <li>
        <div>lalala</div>
    </li>
    <li>
        <div>lalala</div>
    </li>
    <li>
        <div>lalala</div>
    </li>
    <li>
        <div>lalala</div>
    </li>
    <li>
        <div>lalala</div>
    </li>
    <li>
        <div>lalala</div>
    </li>
    <li>
        <div>lalala</div>
    </li>
    <li>
        <div>lalala</div>
    </li>
    <li>
        <div>lalala</div>
    </li>
    <li>
        <div>lalala</div>
    </li>
    <li>
        <div>lalala</div>
    </li>
</ul>

CSS

li {
    float:left;
    width:50px;
    list-style: none;
    height: 50px;
}
div{
        line-height: 50px;
    text-align: center;
    position: relative;
        background:red;
    opacity: 0.7;
    width:50px;
    height: 50px;
-webkit-transition:  1s;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
div:hover {
    height:100px;
    width:100px;
    line-height: 100px;
    margin-left: -25px;
    margin-top: -25px;
    z-index:9;
    background: green;
    font-size: 200%;
}