JSFiddle - React, Tailwind, and code Playground

by maysamsh

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.15.0/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.15.0/js/core/offcanvas.min.js"></script>
<link rel="stylesheet" href="http://sakhthesab.lemonn.ir/css/uikit.css">
<link rel="stylesheet" href="http://sakhthesab.lemonn.ir/css/uikit-rtlfix.css">
<div class="uk-width-1-1">
            <nav class="uk-navbar uk-navbar-attached">
                <div class="uk-container uk-container-center">

                    <a class="uk-navbar-brand uk-hidden-small" href="../index.html"></a>

                    <ul class="uk-navbar-nav uk-hidden-small">
                        <li><a href="documentation_get-started.html">Get Started</a></li>
                        <li class="uk-active"><a href="components.html">Components</a></li>
                        <li><a href="addons.html">Add-ons</a></li>
                        <li><a href="customizer.html">Customizer</a></li>
                        <li><a href="../showcase/index.html">Showcase</a></li>
                    </ul>

                    <a href="#tm-offcanvas" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas=""></a>

                    <div class="uk-navbar-brand uk-navbar-center uk-visible-small">
                        

                </div>
            </nav>
        </div>
        <div class="uk-container uk-container-center">
            <div class="uk-grid uk-grid-preserve uk-grid-small uk-grid-divider">
                <div class="uk-width-medium-1-6">
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                </div>
                <div class="uk-width-medium-5-6">
                    <!-- This is the button toggling the off-canvas sidebar -->
                    <button class="uk-button"...