JSFiddle - React, Tailwind, and code Playground

by Itay

HTML

<div id="tests" class="container">
        <form>
            <input type="text" id='search-textbox' placeholder='Action name'/>
            <input type="button" id='search-button'value="Search"/>
        </form>
        <div class="clip">
            <ul id="ul-tests">
                <li>
                    <p>Action-001</p>
                    <ul>
                        <li>
                            <p>Action-001-001</p>
                            <ul>
                                <li>
                                    <p>Action-001-001-001</p>
                                    <ul>
                                        <li><p>Hello-Action-001-001-001-001</p></li>
                                        <li><p>Hello-Action-001-001-001-002</p></li>
                                        <li><p>Hello-Action-001-001-001-003</p></li>
                                        <li><p>Hello-Action-001-001-001-004</p></li>
                                        <li><p>Hello-Action-001-001-001-005</p></li>
                                        <li><p>Hello-Action-001-001-001-006</p></li>
                                        <li><p>Hello-Action-001-001-001-007</p></li>
                                        <li><p>Hello-Action-001-001-001-008</p></li>
                                        <li><p>Hello-Action-001-001-001-009</p></li>
                                        <li><p>Hello-Action-001-001-001-010</p></li>
                                    </ul>
                                </li>
                                <li><p>bell-Action-001-001-002</p></li>
                                <li><p>bell-Action-001-001-003</p></li>
                                <li><p>bell-Action-001-001-004</p></li>
                                <li><p>bell-Action-001-001-005</p></li>
                                <li><p>bell-Action-001-001-006</p></li>
                                <li><p>bell-Action-001-001-007</p></li>
                            ...

CSS

*
        {
            margin:0;
            padding:0;
        }
        body, html
        {
            min-width: 1000px;
            min-height:700px;
        }
        div#tests
        {
            top:40px;
            left:40px;
            bottom:20px;

            width:240px;

            display:block;

            position:absolute;
        }
        div#tests.container
        {
            background-color:#ccc;

            border-radius:4px;
        }

        div#tests.container>form
        {
            top:4px;
            left:4px;
            right:4px;

            height:32px;
            min-height:32px;

            overflow: hidden;

            display:block;
            position: absolute;
        }

        div#tests.container>form>input#search-textbox
        {
            top:0;
            left:0;

            height:28px;
            min-height:28px;

            width:150px;
            min-width:150px;

            border-radius: 2px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset;

            border: 1px solid #9c9c9c;
            font: normal 18px 'trebuchet MS', arial, helvetica;

            display: inline-block;
            position: absolute;
        }

        div#tests.container>form>input#search-textbox::-webkit-input-placeholder
        {
            padding-left:10px;
            color: #9c9c9c;
            font-style: italic;
        }

        div#tests.container>form>input#search-textbox:-moz-placeholder
        {
            color: #9c9c9c;
            font-style: italic;
        }

        div#tests.container>form>input#search-textbox:-ms-placeholder
        {
            color: #9c9c9c;
            font-style: italic;
        }

        div#tests.container>form>input#search-button
        {
            top:0;
            right:0;

            height:30px;
            min-height:30px;

            width:78px;
            min-width:78px;

            display:inline-block;
           ...