JSFiddle - React, Tailwind, and code Playground

by bakhshi

HTML

<section class="tile-library-category scroll-parent" data-view="durandal/widgets/TileLibraryCategory/view" data-active-view="true">
    <header>
         <h1 data-bind="text: Category.Name">All Tiles</h1>

         <h2 data-bind="text:'(' + Category.TileMetaDataList().length+ ')', visible:Category.TileMetaDataList().length>0">(18)</h2>

        <div class="dropdown"> <span class="dropdownTitle">Sort</span>

            <select sb="98496688" style="display: none;">
                <option value="AddedDate">Recently Added</option>
                <option value="Name">Name</option>
            </select>
            <div id="sbHolder_98496688" class="selectbox"><a id="sbToggle_98496688" href="#" class="sbToggle"></a><a id="sbSelector_98496688" href="#" class="sbSelector">Name</a>

                <ul id="sbOptions_98496688" class="sbOptions" style="display: none;">
                    <li><a href="#AddedDate" rel="AddedDate">Recently Added</a>

                    </li>
                    <li><a href="#Name" rel="Name" class="sbFocus">Name</a>

                    </li>
                </ul>
            </div>
        </div>
    </header>
    <section data-part="body">
        <!--ko foreach: Category.TileMetaDataList-->
        <!--ko widget: { kind: 'TilePreview', TileMetaData: $data, CategoryWidget: $parent }-->
        <section class="tile-preview" data-bind="click: PreviewSelected, css: { highlighted: (_parentCategoryWidget &amp;&amp; _parentCategoryWidget.SelectedPreview() == $data) }" data-view="durandal/widgets/TilePreview/view" data-active-view="true" style="width: 350px;">
            <div class="main-container" data-bind="with: MetaData">
                <section class="content">
                    <hgroup>
                         <h2 data-bind="text: Name">Brand Health</h2>

                         <h3 class="category" data-bind="text: Category">Marketing Analytics</h3>

                    </hgroup>
                    <section class="description"...

CSS

.tile-library-category {
    -webkit-user-select: none;
    -webkit-overflow-scrolling:touch;
    color: rgb(255, 255, 255);
    display: block;
    font-family: Aileron, Helvetica, Arial, Geneva, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    height: 689px;
    line-height: normal;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    overflow-x: auto;
    overflow-y: auto;
    position: relative;
}
.tile-library-category>section {
    -webkit-user-select: none;
    background-color: rgb(47, 52, 58);
    color: rgb(255, 255, 255);
    display: block;
    font-family: Aileron, Helvetica, Arial, Geneva, sans-serif;
    font-size: 0px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: normal;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
}
.tile-preview {
    -webkit-user-select: none;
    background-color: rgb(44, 48, 53);
    border-bottom-color: rgba(80, 87, 98, 0.498039);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-right-color: rgba(80, 87, 98, 0.498039);
    border-right-style: solid;
    border-right-width: 1px;
    color: rgb(255, 255, 255);
    cursor: pointer;
    display: inline-block;
    font-family: Aileron, Helvetica, Arial, Geneva, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    height: 200px;
    line-height: normal;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    overflow-x: hidden;
    overflow-y: hidden;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    position: relative;
    width: 350px;
}
}