Полезные сниппеты пользовательского интерфейса для начинающих

Сниппеты пользовательского интерфейса объединяются для создания веб-дизайна или, можно сказать, пользовательского интерфейса. Различные сниппеты добавляют интерактивность веб-странице. Хотя существует бесчисленное множество сниппетов пользовательского интерфейса, которые могут быть использованы для создания веб-страницы бесчисленным количеством различных способов, некоторые сниппеты используются очень часто и стали в некотором роде обязательными для дизайна пользовательского интерфейса. Многие разработчики вынуждены повторно использовать одни и те же сниппеты пользовательского интерфейса для различных дизайнов пользовательского интерфейса. Я перечислил некоторые общие сниппеты пользовательского интерфейса для наиболее распространенных случаев использования.

Кнопки

Используемые для выполнения действий, кнопки, вероятно, являются самым важным элементом для дизайна пользовательского интерфейса. Поскольку они позволяют пользователю взаимодействовать с сайтом и являются чрезвычайно важными компонентами, хорошо иметь в своем распоряжении сниппеты пользовательского интерфейса для кнопок.

`<div class="py-6 flex justify-center">
            <dh-component>
                <div class="mx-2 my-2 px-6 flex flex-wrap">
                   <button class="mx-2 my-2 bg-gray-300 transition duration-150 ease-in-out hover:bg-gray-400 rounded text-indigo-700 px-8 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2  focus:ring-indigo-700">Button</button>
                   <button class="mx-2 my-2 bg-indigo-700 transition duration-150 ease-in-out hover:bg-indigo-600 rounded text-white px-8 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2  focus:ring-indigo-600">Button</button>
                <a href="javascript: void(0)" class="mx-2 my-2 flex items-center bg-white transition duration-150 ease-in-out hover:bg-gray-100 hover:text-gray-600 rounded border border-gray-600 text-gray-500 pl-3 pr-6 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2  focus:ring-gray-500">
                        <span class="h-4 w-4 mr-2">
                            <svg xmlns="www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" />
                                <rect x="3" y="5" width="18" height="14" rx="2" />
                                <polyline points="3 7 12 13 21 7" />
                            </svg>
                        </span>
                        Button
                    </a>

                </div>
            </dh-component>
        </div>`