Code Examples
            
            
<section class="fixed inset-y-0 left-0 w-96 flex transform transition duration-500 ease-in-out">
    <div class="relative w-screen max-w-full">
        <div class="absolute flex right-0 top-0  w-8 h-8 z-50">
            <button aria-label="panel"
                class="sideNav-close relative w-8 h-8 flex items-center justify-center bg-gray-800 text-gray-300 hover:text-gray-100">
                <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
                    </path>
                </svg>
            </button>
        </div>
        <div class="h-full flex flex-col space-y-6 py-6 bg-black shadow-xl overflow-y-auto">
            <div class="relative flex-1 px-4 sm:px-6">
                <!-- Replace with your content -->
                <div class="relative px-4 sm:px-6 h-full">
                    <div class="h-full flex items-center">
                        <div class="w-full">
                            <ul class="list-none w-full">
                                <li class="text-left">
                                    <a href="#"
                                        class="block transition duration-500 ease-in-out hover:translate-y-1 transform text-2xl font-semibold hover:text-gray-500 px-3 py-3 lg:px-6 mx-1  text-gray-200 ">Service</a>
                                </li>
                                <li class="text-left">
                                    <a href="#"
                                        class="block transition duration-500 ease-in-out hover:translate-y-1 transform text-2xl font-semibold hover:text-gray-500 px-3 py-3 lg:px-6 mx-1  text-gray-500 ">Components</a>
                                </li>
                                <li class="text-left">
                                    <a href="#"
                                        class="block transition duration-500 ease-in-out hover:translate-y-1 transform text-2xl font-semibold hover:text-gray-500 px-3 py-3 lg:px-6 mx-1  text-gray-200 ">Blog</a>
                                </li>
                                <li class="text-left">
                                    <a href="#"
                                        class="block transition duration-500 ease-in-out hover:translate-y-1 transform text-2xl font-semibold hover:text-gray-500 px-3 py-3 lg:px-6 mx-1  text-gray-200 ">Supports</a>
                                </li>
                            </ul>
                            <div class="text-gray-400 px-6 pt-6">
                                <div class="text-black text-base font-semibold mb-3"><svg
                                        class="svg-inline--fa fa-map-marker-alt fa-w-12" aria-hidden="true"
                                        focusable="false" data-prefix="fas" data-icon="map-marker-alt" role="img"
                                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" data-fa-i2svg="">
                                        <path fill="currentColor"
                                            d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z">
                                        </path>
                                    </svg><!-- <i class="fas fa-map-marker-alt"></i> -->
                                </div>
                                <div class="text-gray-400 text-sm">
                                    (44429) 울산광역시 중구 종가로 100 울산테크노파크 기술혁신A동 302호<br>
                                    Email : gjworks2@gmail.com
                                </div>
                            </div>
                            <footer class="pt-5 pb-8">
                                <div class="px-3">
                                    <div class="flex flex-wrap grid grid-cols-1 pt-5 md:pt-0">
                                        <div class="col-span-1 pt-3 pb-3 order-2 md:order-2 md:order-1">
                                            <div class="list-none flex flex-wrap justify-start">
                                                <a class="transition duration-500 ease-in-out hover:translate-y-1 transform text-gray-500 hover:text-gray-300 text-xs leading-6 px-3"
                                                    href="#">Terms
                                                    of service</a>
                                                <a class="transition duration-500 ease-in-out hover:translate-y-1 transform text-gray-500 hover:text-gray-300 text-xs leading-6 px-3"
                                                    href="#">Privacy
                                                    policy</a>
                                                <span
                                                    class="transition duration-500 ease-in-out hover:translate-y-1 transform text-gray-500 hover:text-gray-300 text-xs leading-6 px-3">ⓒ
                                                    <strong>Gjworks</strong>.</span>
                                            </div>
                                        </div>
                                        <!-- <div class="flex items-center justify-center logo order-0 md:order-0 md:order-2">
                                            <a href="/">
                                            <img class="w-10 h-10 m-0" src="/layouts/tailwindcss/assets/images/gjworks_black.svg" alt="로고"  data-toggle="tooltip" data-placement="bottom" data-html="true" title="지제이웍스">
                                                <object type="image/svg+xml" data="{{ asset('plugins/gjworks/src/Themes/Gjworks/assets/images/gjworks.svg') }}" data-toggle="tooltip" data-placement="bottom" data-html="true" title="지제이웍스"></object>
                                            </a>
                                        </div> -->
                                        <div class="col-span-1 pt-3 pb-3 order-1 md:order-1 md:order-3">
                                            <div class="list-none flex justify-start">
                                                <a href="#"
                                                    class="transition duration-500 ease-in-out hover:translate-y-1 transform text-gray-500 hover:text-gray-300 text-xl leading-6 px-3"
                                                    target="_blank" rel="noopener"><svg
                                                        class="svg-inline--fa fa-medium fa-w-14" aria-hidden="true"
                                                        focusable="false" data-prefix="fab" data-icon="medium"
                                                        role="img" xmlns="http://www.w3.org/2000/svg"
                                                        viewBox="0 0 448 512" data-fa-i2svg="">
                                                        <path fill="currentColor"
                                                            d="M0 32v448h448V32H0zm372.2 106.1l-24 23c-2.1 1.6-3.1 4.2-2.7 6.7v169.3c-.4 2.6.6 5.2 2.7 6.7l23.5 23v5.1h-118V367l24.3-23.6c2.4-2.4 2.4-3.1 2.4-6.7V199.8l-67.6 171.6h-9.1L125 199.8v115c-.7 4.8 1 9.7 4.4 13.2l31.6 38.3v5.1H71.2v-5.1l31.6-38.3c3.4-3.5 4.9-8.4 4.1-13.2v-133c.4-3.7-1-7.3-3.8-9.8L75 138.1V133h87.3l67.4 148L289 133.1h83.2v5z">
                                                        </path>
                                                    </svg><!-- <i class="fab fa-medium"></i> --></a>
                                                <a class="transition duration-500 ease-in-out hover:translate-y-1 transform text-gray-500 hover:text-gray-300 text-xl leading-6 px-3"
                                                    href="#" target="_blank"
                                                    rel="noopener"><svg class="svg-inline--fa fa-facebook fa-w-16"
                                                        aria-hidden="true" focusable="false" data-prefix="fab"
                                                        data-icon="facebook" role="img"
                                                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
                                                        data-fa-i2svg="">
                                                        <path fill="currentColor"
                                                            d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z">
                                                        </path>
                                                    </svg><!-- <i class="fab fa-facebook"></i> --></a>
                                                <a class="transition duration-500 ease-in-out hover:translate-y-1 transform text-gray-500 hover:text-gray-300 text-xl leading-6 px-3"
                                                    href="#" target="_blank"
                                                    rel="noopener"><svg class="svg-inline--fa fa-twitter fa-w-16"
                                                        aria-hidden="true" focusable="false" data-prefix="fab"
                                                        data-icon="twitter" role="img"
                                                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
                                                        data-fa-i2svg="">
                                                        <path fill="currentColor"
                                                            d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z">
                                                        </path>
                                                    </svg><!-- <i class="fab fa-twitter"></i> --></a>
                                                <a class="transition duration-500 ease-in-out hover:translate-y-1 transform text-gray-500 hover:text-gray-300 text-xl leading-6 px-3"
                                                    href="#"><svg class="svg-inline--fa fa-youtube fa-w-18"
                                                        aria-hidden="true" focusable="false" data-prefix="fab"
                                                        data-icon="youtube" role="img"
                                                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"
                                                        data-fa-i2svg="">
                                                        <path fill="currentColor"
                                                            d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z">
                                                        </path>
                                                    </svg><!-- <i class="fab fa-youtube"></i> --></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </footer>
                        </div>
                    </div>
                </div>
                <!-- /End replace -->
            </div>
        </div>
    </div>
</section>