JSFiddle - React, Tailwind, and code Playground

by bkvirendra

HTML

<body style="font-size:62.5%;">
    <div id="a">
    </div>
  <ul class="item">
    <li>Glad to Know You.
    <li>Sad to Know You.
        </ul>

CSS

#a { margin: 0px; width: 10px; height: 10px; background: green; border: 1px solid black; position: relative; display:inline-block; float:left; }
.item {
    display:none;
    display:inline-block; 
    margin-left:12px;
    position:fixed;
}

JavaScript

$(document).ready(function() {
    $(".item").hide();
    $("div").click(function() {
        $(".item").show("slide", {
            direction: "left",
        }, 1000);
    });

});