JSFiddle - React, Tailwind, and code Playground

by suhail

HTML

<div class="container">
        <header>
            <div>
                West header here
            </div>
            <div>
                kc navigation here
            </div>
        </header>
        <div class="kc-body">

            <!-- create a kc search component  -->
            <div class="kc-banner">
                <div class="kc-banner-text">
                    Knowledge Center
                </div>
                <div class="kc-search">
                    put search box here
                </div>
            </div>
            <!-- kc-serach component ends here -->

            <!-- login register callout component starts here -->
            <!-- create a login reg callout component using below code -->
            <div class="kc-reg-logi-callout">
                <div class="row align-items-center">
                    <div class="col-7">
                        <div class="kc-reg-text">
                            Accessing the Knowledge center requires a simple, one-time registration
                        </div>
                    </div>
                    <div class="col-5 ">
                        <div class="kc-logn-reg-comp d-flex justify-content-end">
                            <div class="kc-reg">
                                <img class="kc-reg-img" src="images/kc-register.png">

                                Register
                            </div>
                            <div class="kc-login">
                                <img class="kc-reg-img" src="images/kc-login.png">
                                Login
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <!-- login register callout component ends here -->

            <div class="kc-browse">
                <div class="row">
                    <!-- col splitter -->
                    <div class="col-md-6">
                        <!-- create a  kc browse...