JSFiddle - React, Tailwind, and code Playground

by Hendra Nucleo

HTML

<ul class="nav navbar-nav">
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="">Groups <b class="caret pull-right"></b></a>
        <ul class="dropdown-menu pull-right" style="display: block;">
            <li class="filter">
                <a href="#" style="padding:8px 20px;">Filter</a>
                <div class="src-key">
                    <form action="/dev.popover/admin/products" class="flex-search" role="form" id="ProductAdminIndexForm" method="post" accept-charset="utf-8">
                        <div style="display:none;">
                            <input type="hidden" name="_method" value="POST">
                        </div>  <span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span>
                        <input type="text" id="group-fill" class="src-prod ui-autocomplete-input" name="data[Product][info]" autocomplete="off">
                        <input type="hidden" name="data[Product][track]" value="g">
                        <input type="hidden" id="group-id" name="data[Product][group_id]">
                    </form>
                </div>
            </li>
            <div class="divider"></div>
            <li>
                <div class="scrlr">
                    <ul class="all-grps">
                        <li>
                            <a href="/dev.popover/admin/products/index/g/1">
                                <input type="checkbox" name="data[Group][id]" id="1">Sample Group 1</a>
                        </li>
                        <li>
                            <a href="/dev.popover/admin/products/index/g/2">
                                <input type="checkbox" name="data[Group][id]" id="2">Sample Group 2</a>
                        </li>
                        <li>
                            <a href="/dev.popover/admin/products/index/g/3">
                                <input type="checkbox" name="data[Group][id]" id="3">Sample Group 3</a>
                ...