MentorKit Pattern Library

Date Input 

<label class="block">
    <span class="text-grey-800 mb-2 block font-semibold"></span>
    <div class="relative">
        <input type="text" class="
                        block
                        w-full
                        rounded-md
                        border-grey-400
                        shadow-sm
                        focus:border-alpha focus:ring-3 focus:ring-alpha/20">
        <div class="absolute w-5 h-5 right-2 top-2/4 -translate-y-2/4 pointer-events-none">
            <svg class="fill-current w-full h-full text-grey" aria-hidden="true">
                <use href="/front-end/sprite.svg#icon-calendar"></use>
            </svg>
        </div>
    </div>
</label>
 
<label class="block">
    <span class="text-grey-800 mb-2 block font-semibold">{{label}}</span>
    <div class="relative">
        <input type="text" class="
                        block
                        w-full
                        rounded-md
                        border-grey-400
                        shadow-sm
                        focus:border-alpha focus:ring-3 focus:ring-alpha/20">
        <div class="absolute w-5 h-5 right-2 top-2/4 -translate-y-2/4 pointer-events-none">
            {% render "@icon", { name: "icon-calendar", modifier: "fill-current w-full h-full text-grey", ariaHidden: true } %}
        </div>
    </div>
</label>
 
{
  "siteName": "MentorKit Pattern Library"
}

No notes defined.