@extends('layout.layout')
@php
    $title='Colors';
    $subTitle = 'Components / Colors';
    $script = '<script>
                        // =========================== Copy Color Code when click on box Js Start ================================ 
                        $(".color-box").click(function() {
                            var clipboardText = $(this).find("[data-clipboard-text]").attr("data-clipboard-text");

                            // Create a temporary input element to hold the text to copy
                            var tempInput = $("<input>");
                            $("body").append(tempInput);
                            tempInput.val(clipboardText).select();

                            // Copy the text to the clipboard 
                            document.execCommand("copy");

                            // Remove the temporary input element
                            tempInput.remove();


                            // Remove any existing badge
                            $(this).find(".copied-message").remove();

                            // Create the notification badge
                            var $badge = $(`<span class="copied-message text-xs badge bg-success-main py-8 px-12 fw-normal rounded-pill position-absolute start-50 translate-middle-x top-0 mt-24">    Copied! </span>`)

                            // Append the badge to the color box
                            $(this).append($badge);

                            // Show the badge and then fade it out
                            $badge.fadeIn().delay(800).fadeOut(function() {
                                $(this).remove();
                            });

                        });
                        // =========================== Copy Color Code when click on box Js End ================================ 
    </script>';
@endphp

@section('content')

            <div class="row gy-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body p-24">
                            <!-- Shade Start -->
                            <div class="mb-32">
                                <h6 class="text-md mb-24">Shades</h6>
                                <div class="d-flex flex-wrap">
                                    <div class="color-box h-190-px cursor-pointer max-w-150-px w-100 bg-base position-relative p-28 flex-grow-1 border">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block">100</span>
                                            <span class="fw-medium text-md text-primary-light d-block" data-clipboard-text="bg-base">#FFFFFF</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer max-w-150-px w-100 bg-neutral-900 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block text-base">100</span>
                                            <span class="fw-medium text-md text-primary-light d-block text-base" data-clipboard-text="bg-neutral-900">#111827</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Shade End -->

                            <!-- Neutral Start -->
                            <div class="mb-32">
                                <h6 class="text-md mb-24">Neutral</h6>
                                <div class="d-flex flex-wrap">
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-neutral-50 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block">50</span>
                                            <span class="fw-medium text-md text-primary-light d-block" data-clipboard-text="bg-neutral-50">#FAFAFA</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-neutral-100 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block">100</span>
                                            <span class="fw-medium text-md text-primary-light d-block" data-clipboard-text="bg-neutral-100">#F5F5F5</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-neutral-200 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block">200</span>
                                            <span class="fw-medium text-md text-primary-light d-block" data-clipboard-text="bg-neutral-200">#E5E5E5</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-neutral-300 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block">300</span>
                                            <span class="fw-medium text-md text-primary-light d-block" data-clipboard-text="bg-neutral-300">#D4D4D4</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-neutral-400 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-bloc">400</span>
                                            <span class="fw-medium text-md text-primary-light d-block" data-clipboard-text="bg-neutral-400">#A3A3A3</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-neutral-500 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block text-base">500</span>
                                            <span class="fw-medium text-md text-primary-light d-block text-base" data-clipboard-text="bg-neutral-500">#737373</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-neutral-600 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block text-base">600</span>
                                            <span class="fw-medium text-md text-primary-light d-block text-base" data-clipboard-text="bg-neutral-600">#525252</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-neutral-700 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block text-base">700</span>
                                            <span class="fw-medium text-md text-primary-light d-block text-base" data-clipboard-text="bg-neutral-700">#404040</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-neutral-800 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block text-base">800</span>
                                            <span class="fw-medium text-md text-primary-light d-block text-base" data-clipboard-text="bg-neutral-800">#262626</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-neutral-900 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block text-base">900</span>
                                            <span class="fw-medium text-md text-primary-light d-block text-base" data-clipboard-text="bg-neutral-900">#171717</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Neutral End -->

                            <!-- Primary Start -->
                            <div class="mb-32">
                                <h6 class="text-md mb-24">Primary Color</h6>
                                <div class="d-flex flex-wrap">
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-primary-50 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block">50</span>
                                            <span class="fw-medium text-md text-primary-light d-block" data-clipboard-text="bg-primary-50">#E4F1FF</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-primary-100 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block">100</span>
                                            <span class="fw-medium text-md text-primary-light d-block" data-clipboard-text="bg-primary-100">#BFDCFF</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-primary-200 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block">200</span>
                                            <span class="fw-medium text-md text-primary-light d-block" data-clipboard-text="bg-primary-200">#95C7FF</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-primary-300 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block">300</span>
                                            <span class="fw-medium text-md text-primary-light d-block" data-clipboard-text="bg-primary-300">#6BB1FF</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-primary-400 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-bloc">400</span>
                                            <span class="fw-medium text-md text-primary-light d-block" data-clipboard-text="bg-primary-400">#519FFF</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-primary-500 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block text-base">500</span>
                                            <span class="fw-medium text-md text-primary-light d-block text-base" data-clipboard-text="bg-primary-500">#458EFF</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-primary-600 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block text-base">600</span>
                                            <span class="fw-medium text-md text-primary-light d-block text-base" data-clipboard-text="bg-primary-600">#487FFF</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-primary-700 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block text-base">700</span>
                                            <span class="fw-medium text-md text-primary-light d-block text-base" data-clipboard-text="bg-primary-700">#486CEA</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-primary-800 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block text-base">800</span>
                                            <span class="fw-medium text-md text-primary-light d-block text-base" data-clipboard-text="bg-primary-800">#4759D6</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-primary-900 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block text-base">900</span>
                                            <span class="fw-medium text-md text-primary-light d-block text-base" data-clipboard-text="bg-primary-900">#4536B6</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Primary End -->

                            <!-- Error Start -->
                            <div class="mb-32">
                                <h6 class="text-md mb-24">Error Color</h6>
                                <div class="d-flex flex-wrap">
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-danger-50 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block">50</span>
                                            <span class="fw-medium text-md text-primary-light d-block" data-clipboard-text="bg-danger-50">#FEF2F2</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-danger-100 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block">100</span>
                                            <span class="fw-medium text-md text-primary-light d-block" data-clipboard-text="bg-danger-100">#FEE2E2</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-danger-200 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block">200</span>
                                            <span class="fw-medium text-md text-primary-light d-block" data-clipboard-text="bg-danger-200">#FECACA</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-danger-300 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block">300</span>
                                            <span class="fw-medium text-md text-primary-light d-block" data-clipboard-text="bg-danger-300">#FCA5A5</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-danger-400 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-bloc">400</span>
                                            <span class="fw-medium text-md text-primary-light d-block" data-clipboard-text="bg-danger-400">#F87171</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-danger-500 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block text-base">500</span>
                                            <span class="fw-medium text-md text-primary-light d-block text-base" data-clipboard-text="bg-danger-500">#EF4444</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-danger-600 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block text-base">600</span>
                                            <span class="fw-medium text-md text-primary-light d-block text-base" data-clipboard-text="bg-danger-600">#DC2626</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-danger-700 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block text-base">700</span>
                                            <span class="fw-medium text-md text-primary-light d-block text-base" data-clipboard-text="bg-danger-700">#B91C1C</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-danger-800 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block text-base">800</span>
                                            <span class="fw-medium text-md text-primary-light d-block text-base" data-clipboard-text="bg-danger-800">#991B1B</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-danger-900 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block text-base">900</span>
                                            <span class="fw-medium text-md text-primary-light d-block text-base" data-clipboard-text="bg-danger-900">#7F1D1D</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Error End -->

                            <!-- Success Start -->
                            <div class="mb-32">
                                <h6 class="text-md mb-24">Success Color</h6>
                                <div class="d-flex flex-wrap">
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-success-50 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block">50</span>
                                            <span class="fw-medium text-md text-primary-light d-block" data-clipboard-text="bg-success-50">#F0FDF4</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-success-100 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block">100</span>
                                            <span class="fw-medium text-md text-primary-light d-block" data-clipboard-text="bg-success-100">#DCFCE7</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-success-200 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block">200</span>
                                            <span class="fw-medium text-md text-primary-light d-block" data-clipboard-text="bg-success-200">#BBF7D0</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-success-300 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block">300</span>
                                            <span class="fw-medium text-md text-primary-light d-block" data-clipboard-text="bg-success-300">#86EFAC</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-success-400 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-bloc">400</span>
                                            <span class="fw-medium text-md text-primary-light d-block" data-clipboard-text="bg-success-400">#4ADE80</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-success-500 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block text-base">500</span>
                                            <span class="fw-medium text-md text-primary-light d-block text-base" data-clipboard-text="bg-success-500">#22C55E</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-success-600 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block text-base">600</span>
                                            <span class="fw-medium text-md text-primary-light d-block text-base" data-clipboard-text="bg-success-600">#16A34A</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-success-700 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block text-base">700</span>
                                            <span class="fw-medium text-md text-primary-light d-block text-base" data-clipboard-text="bg-success-700">#15803D</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-success-800 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block text-base">800</span>
                                            <span class="fw-medium text-md text-primary-light d-block text-base" data-clipboard-text="bg-success-800">#166534</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-success-900 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block text-base">900</span>
                                            <span class="fw-medium text-md text-primary-light d-block text-base" data-clipboard-text="bg-success-900">#14532D</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Success End -->

                            <!-- Warning Start -->
                            <div class="mb-32">
                                <h6 class="text-md mb-24">Warning Color</h6>
                                <div class="d-flex flex-wrap">
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-warning-50 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block">50</span>
                                            <span class="fw-medium text-md text-primary-light d-block" data-clipboard-text="bg-warning-50">#FEFCE8</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-warning-100 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-dark-1 d-block">100</span>
                                            <span class="fw-medium text-md text-dark-1 d-block" data-clipboard-text="bg-warning-100">#FEF9C3</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-warning-200 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-dark-1 d-block">200</span>
                                            <span class="fw-medium text-md text-dark-1 d-block" data-clipboard-text="bg-warning-200">#FEF08A</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-warning-300 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-dark-1 d-block">300</span>
                                            <span class="fw-medium text-md text-dark-1 d-block" data-clipboard-text="bg-warning-300">#FDE047</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-warning-400 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-dark-1 d-bloc">400</span>
                                            <span class="fw-medium text-md text-dark-1 d-block" data-clipboard-text="bg-warning-400">#FACC15</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-warning-500 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block text-base">500</span>
                                            <span class="fw-medium text-md text-primary-light d-block text-base" data-clipboard-text="bg-warning-500">#EAB308</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-warning-600 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block text-base">600</span>
                                            <span class="fw-medium text-md text-primary-light d-block text-base" data-clipboard-text="bg-warning-600">#CA8A04</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-warning-700 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block text-base">700</span>
                                            <span class="fw-medium text-md text-primary-light d-block text-base" data-clipboard-text="bg-warning-700">#A16207</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-warning-800 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block text-base">800</span>
                                            <span class="fw-medium text-md text-primary-light d-block text-base" data-clipboard-text="bg-warning-800">#854D0E</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-warning-900 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block text-base">900</span>
                                            <span class="fw-medium text-md text-primary-light d-block text-base" data-clipboard-text="bg-warning-900">#713F12</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Warning End -->

                            <!-- Info Start -->
                            <div class="mb-32">
                                <h6 class="text-md mb-24">Info Color</h6>
                                <div class="d-flex flex-wrap">
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-info-50 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block">50</span>
                                            <span class="fw-medium text-md text-primary-light d-block" data-clipboard-text="bg-info-50">#EFF6FF</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-info-100 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-dark-1 d-block">100</span>
                                            <span class="fw-medium text-md text-dark-1 d-block" data-clipboard-text="bg-info-100">#DBEAFE</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-info-200 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-dark-1 d-block">200</span>
                                            <span class="fw-medium text-md text-dark-1 d-block" data-clipboard-text="bg-info-200">#BFDBFE</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-info-300 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-dark-1 d-block">300</span>
                                            <span class="fw-medium text-md text-dark-1 d-block" data-clipboard-text="bg-info-300">#93C5FD</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-info-400 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-dark-1 d-bloc">400</span>
                                            <span class="fw-medium text-md text-dark-1 d-block" data-clipboard-text="bg-info-400">#60A5FA</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-info-500 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block text-base">500</span>
                                            <span class="fw-medium text-md text-primary-light d-block text-base" data-clipboard-text="bg-info-500">#3B82F6</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-info-600 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block text-base">600</span>
                                            <span class="fw-medium text-md text-primary-light d-block text-base" data-clipboard-text="bg-info-600">#2563EB</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-info-700 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block text-base">700</span>
                                            <span class="fw-medium text-md text-primary-light d-block text-base" data-clipboard-text="bg-info-700">#1D4ED8</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-info-800 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block text-base">800</span>
                                            <span class="fw-medium text-md text-primary-light d-block text-base" data-clipboard-text="bg-info-800">#1E40AF</span>
                                        </div>
                                    </div>
                                    <div class="color-box h-190-px cursor-pointer min-w-120-px bg-info-900 position-relative p-28 flex-grow-1">
                                        <div class="position-absolute start-50 translate-middle-x bottom-0 text-center mb-28">
                                            <span class="fw-medium text-lg text-primary-light d-block text-base">900</span>
                                            <span class="fw-medium text-md text-primary-light d-block text-base" data-clipboard-text="bg-info-900">#1E3A8A</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Info End -->

                        </div>
                    </div>
                </div>
            </div>

@endsection