Form

<div class="space-y-6">
    <h3 class="uppercase font-bold text-dark border-t border-dark/10 pt-3 mb-10">Form Section Heading</h3>
    <div class="mb-6">
        <label for="text" class="block font-bold">Text input label <span class="text-red-500">*</span></label>
        <div class="mt-3">
            <input type="text" name="text" id="text" class="block w-full border-dark/40 rounded px-5 py-3 focus:outline-none focus:ring-0 focus:shadow-lg focus:border-blue" placeholder="Input placeholder" required>
        </div>
    </div>

    <div class="mb-6">
        <label for="text-error" class="block font-bold">Text input label</label>
        <div class="mt-3">
            <input type="text" name="text-error" id="text-error" class="block w-full border-red-500 rounded px-5 py-3 focus:outline-none focus:ring-0 focus:shadow-lg focus:border-red-500" placeholder="Input placeholder" value="Entered text" aria-invalid="true" aria-describedby="email-error">
        </div>
        <p class="mt-2 text-sm text-red-600" id="email-error">Error message</p>
    </div>
    <div class="mb-6">
        <label for="message" class="block font-bold">Textarea label</label>
        <div class="mt-3">
            <textarea rows="4" name="message" id="message" class="block w-full border-dark/40 rounded px-5 py-3 focus:outline-none focus:ring-0 focus:shadow-lg focus:border-blue" placeholder="Enter message"></textarea>
        </div>
    </div>

    <div class="mb-6">
        <label for="message-error" class="block font-bold">Textarea label</label>
        <div class="mt-3">
            <textarea rows="4" name="message-error" id="message-error" class="block w-full border-red-500 rounded px-5 py-3 focus:outline-none focus:ring-0 focus:shadow-lg focus:border-red-500" placeholder="Enter message" aria-invalid="true" aria-describedby="email-error"></textarea>
        </div>
        <p class="mt-2 text-sm text-red-600" id="email-error">Error message</p>
    </div>
    <div class="mb-6">
        <label for="select" class="block font-bold">Select box label</label>
        <select id="select" name="select" class="mt-3 block w-full rounded pl-5 pr-12 py-3 border-dark/40 focus:outline-none focus:ring-0 focus:shadow-lg focus:border-blue">
            <option>United States</option>
            <option selected>Canada</option>
            <option>Mexico</option>
        </select>
    </div>

    <div class="mb-6">
        <label for="select" class="block font-bold">Select box label</label>
        <select id="select" name="select" class="mt-3 block w-full rounded pl-5 pr-12 py-3 border-red-500 focus:outline-none focus:ring-0 focus:shadow-lg focus:border-red-500">
            <option>United States</option>
            <option selected>Canada</option>
            <option>Mexico</option>
        </select>
        <p class="mt-2 text-sm text-red-600" id="email-error">Error message</p>
    </div>
    <div class="mb-6">
        <fieldset class="space-y-6">
            <legend class="font-bold">Checkbox selection label</legend>

            <div class="relative flex items-start">
                <div class="flex items-center h-6">
                    <input id="option-1" name="options" type="checkbox" class="h-8 w-8 text-blue border-dark/40 rounded cursor-pointer focus:outline-none focus:ring-1 focus:ring-blue focus:shadow-lg focus:border-blue">
                </div>
                <div class="ml-3">
                    <label for="option-1" class="">Option 1</label>
                </div>
            </div>
            <div class="relative flex items-start">
                <div class="flex items-center h-6">
                    <input id="option-2" name="options" type="checkbox" class="h-8 w-8 text-blue border-dark/40 rounded cursor-pointer focus:outline-none focus:ring-1 focus:ring-blue focus:shadow-lg focus:border-blue">
                </div>
                <div class="ml-3">
                    <label for="option-2" class="">Option 2</label>
                </div>
            </div>
            <div class="relative flex items-start">
                <div class="flex items-center h-6">
                    <input id="option-3" name="options" type="checkbox" class="h-8 w-8 text-blue border-red-600 rounded cursor-pointer focus:outline-none focus:ring-1 focus:ring-red-500 focus:shadow-lg focus:border-red-500">
                </div>
                <div class="ml-3">
                    <label for="option-3" class="">Option 3</label>
                    <p class="mt-1 text-sm text-red-600" id="email-error">Error message</p>
                </div>
            </div>
        </fieldset>
    </div>
    <div class="mb-6">
        <fieldset class="space-y-6">
            <legend class="font-bold">Checkbox selection label</legend>

            <div class="relative flex items-start">
                <div class="flex items-center h-6">
                    <input id="option-1" name="options" type="radio" class="h-8 w-8 text-blue border-dark/40">
                </div>
                <div class="ml-3">
                    <label for="option-1" class="">Option 1</label>
                </div>
            </div>
            <div class="relative flex items-start">
                <div class="flex items-center h-6">
                    <input id="option-2" name="options" aria-describedby="option-2-description" type="radio" class="h-8 w-8 text-blue border-dark/40 rounded-full cursor-pointer focus:outline-none focus:ring-1 focus:ring-blue focus:shadow-lg focus:border-blue">
                </div>
                <div class="ml-3">
                    <label for="option-2" class="">Option 2</label>
                    <p id="option-2-description" class="mt-2 text-sm">Get notified when someones posts a comment on a posting.</p>
                </div>
            </div>
            <div class="relative flex items-start">
                <div class="flex items-center h-6">
                    <input id="option-3" name="options" type="radio" class="h-8 w-8 text-blue border-red-600 rounded-full cursor-pointer focus:outline-none focus:ring-1 focus:ring-red-500 focus:shadow-lg focus:border-red-500">
                </div>
                <div class="ml-3">
                    <label for="option-3" class="">Option 3</label>
                    <p class="text-sm text-red-600" id="email-error">Error message</p>
                </div>
            </div>
            <div class="relative flex items-start">
                <div class="flex items-center h-6">
                    <input id="option-2" name="options" aria-describedby="option-2-description" type="radio" class="h-8 w-8 text-blue border-dark/40 rounded-full cursor-pointer focus:outline-none focus:ring-1 focus:ring-blue focus:shadow-lg focus:border-blue" disabled>
                </div>
                <div class="ml-3">
                    <label for="option-2" class="opacity-50">Option 2</label>
                    <p id="option-2-description" class="mt-2 text-sm">Get notified when someones posts a comment on a posting.</p>
                </div>
            </div>
        </fieldset>
    </div> <button class="btn btn-dark">Button</button>

    <a href="#" class="btn btn-blue">Link Button</a> <button class="btn-outline btn-dark">Button</button>

    <a href="#" class="btn-outline btn-blue">Link Button</a>
</div>