<html lang=\"ja\">\r\n<head>\r\n<meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\">\r\n<title>Tailwind CSS\u306e\u30b5\u30f3\u30d7\u30eb<\/title>\r\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <form class=\"w-full mt-5\">\r\n <div class=\"flex flex-wrap -mx-3 mb-6\">\r\n <div class=\"w-full md:w-1\/2 px-3 mb-6 md:mb-0\">\r\n <label class=\"block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2\" for=\"grid-first-name\">\r\n First Name\r\n <\/label>\r\n <input class=\"appearance-none block w-full bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white\" id=\"grid-first-name\" type=\"text\" placeholder=\"Jane\">\r\n <p class=\"text-red-500 text-xs italic\">Please fill out this field.<\/p>\r\n <\/div>\r\n <div class=\"w-full md:w-1\/2 px-3\">\r\n <label class=\"block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2\" for=\"grid-last-name\">\r\n Last Name\r\n <\/label>\r\n <input class=\"appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500\" id=\"grid-last-name\" type=\"text\" placeholder=\"Doe\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex flex-wrap -mx-3 mb-6\">\r\n <div class=\"w-full px-3\">\r\n <label class=\"block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2\" for=\"grid-password\">\r\n Password\r\n <\/label>\r\n <input class=\"appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500\" id=\"grid-password\" type=\"password\" placeholder=\"******************\">\r\n <p class=\"text-gray-600 text-xs italic\">Make it as long and as crazy as you'd like<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex flex-wrap -mx-3 mb-2\">\r\n <div class=\"w-full md:w-1\/3 px-3 mb-6 md:mb-0\">\r\n <label class=\"block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2\" for=\"grid-city\">\r\n City\r\n <\/label>\r\n <input class=\"appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500\" id=\"grid-city\" type=\"text\" placeholder=\"Albuquerque\">\r\n <\/div>\r\n <div class=\"w-full md:w-1\/3 px-3 mb-6 md:mb-0\">\r\n <label class=\"block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2\" for=\"grid-state\">\r\n State\r\n <\/label>\r\n <div class=\"relative\">\r\n <select class=\"block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500\" id=\"grid-state\">\r\n <option>New Mexico<\/option>\r\n <option>Missouri<\/option>\r\n <option>Texas<\/option>\r\n <\/select>\r\n <div class=\"pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700\">\r\n <svg class=\"fill-current h-4 w-4\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 20 20\"><path d=\"M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"w-full md:w-1\/3 px-3 mb-6 md:mb-0\">\r\n <label class=\"block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2\" for=\"grid-zip\">\r\n Zip\r\n <\/label>\r\n <input class=\"appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500\" id=\"grid-zip\" type=\"text\" placeholder=\"90210\">\r\n <\/div>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n<\/body>\r\n<\/html><\/pre>\nJavaScript\u4e0d\u8981\u306e\u305f\u3081\u8efd\u91cf<\/h3>\n
Bootstrap\u3060\u3068\u4ee5\u4e0b\u306e\u3088\u3046\u306bJS\u30d5\u30a1\u30a4\u30eb\u3082\u8aad\u307f\u8fbc\u3080\u5fc5\u8981\u304c\u3042\u308b\u304c\u3001Tailwind CSS\u306f\u4e0d\u8981\u306a\u305f\u3081\u8efd\u91cf\u3002<\/p>\n
<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/js\/bootstrap.bundle.min.js\"><\/script><\/pre>\n <\/p>\n
\u6240\u611f<\/h2>\n
Tailwind CSS\u306f\u30c7\u30b6\u30a4\u30f3\u306b\u30aa\u30ea\u30b8\u30ca\u30ea\u30c6\u30a3\u304c\u51fa\u3057\u3084\u3059\u3044\u3082\u306e\u306eCSS\u306e\u77e5\u8b58\u304c\u5fc5\u8981\u306a\u305f\u3081\u3001\u30d5\u30ed\u30f3\u30c8\u5074\u306e\u4f5c\u696d\u3092\u3059\u308b\u4eba\u306b\u5411\u3044\u3066\u308b\u3093\u3058\u3083\u306a\u3044\u304b\u3068\u601d\u3046\u3002\u81ea\u5206\u3068\u3057\u3066\u306f\u3042\u307e\u308aCSS\u306e\u77e5\u8b58\u304c\u3042\u308b\u3068\u306f\u8a00\u3048\u306a\u3044\u306e\u3067\u5f15\u304d\u7d9a\u304dBootstrap\u3092\u4f7f\u7528\u3059\u308b\u5f62\u306b\u306a\u308a\u305d\u3046\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u3042\u308b\u30b5\u30a4\u30c8\u3092Wappalyzer\u3067\u8abf\u67fb\u3057\u3066\u3044\u305f\u969b\u306bUI\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u304cTailw ... <\/p>\n","protected":false},"author":1,"featured_media":4402,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[10],"tags":[],"class_list":["post-4401","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/posts\/4401","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/comments?post=4401"}],"version-history":[{"count":4,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/posts\/4401\/revisions"}],"predecessor-version":[{"id":4406,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/posts\/4401\/revisions\/4406"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/media\/4402"}],"wp:attachment":[{"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/media?parent=4401"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/categories?post=4401"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/tags?post=4401"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}