Home
Blog
Vídeos
Criando botões com Tailwindcss
</div> </div> </main> <footer class="relative z-10 bg-primary text-white"> <div class="w-full px-5 sm:mx-auto max-w-7xl py-6 xl:py-16 md:py-12 sm:py-8"><div class="grid lg:grid-cols-4"> <nav> <h4 class="font-light text-xl">Onde estou na web?</h4> <ul> <li class="flex gap-3 items-center"> <span class="p-1 rounded bg-secondary"> <svg fill="currentColor" class="w-4 h-4" src="github.svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg> </span> <a class="block py-2 hover:text-secondary" href="https://github.com/wallacemaxters" target="_blank">Github</a> </li> <li class="flex gap-3 items-center"> <span class="p-1 rounded bg-secondary"> <svg fill="currentColor" class="w-4 h-4" src="stackoverflow.svg" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"> <path d="M392,440V320h40V480H64V320h40V440Z" fill="currentColor" /> <path fill="currentColor" d="M149.1,308.77l198.57,40.87,8.4-39.32L157.5,269.45Zm26.27-93.12L359.22,300,376,263.76,192.18,178.92Zm50.95-89,156,127.78,25.74-30.52-156-127.78ZM328,32,294.61,55.8,415.43,216.17,448,192ZM144,400H348V360H144Z" /> </svg> </span> <a class="block py-2 hover:text-secondary" href="https://pt.stackoverflow.com/users/4995/wallace-maxters" target="_blank">Stackoverflow</a> </li> <li class="flex gap-3 items-center"> <span class="p-1 rounded bg-secondary"> <svg fill="currentColor" class="w-4 h-4" src="linkedin.svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"> <path fill="currentColor" d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zM6 11.875H4v-7h2v7zm-.938-7.429a.937.937 0 1 1 0-1.874.937.937 0 0 1 0 1.874zM13 11.875h-2V7.547c0-.507-.145-.862-.768-.862-1.033 0-1.232.862-1.232.862v4.328H7v-7h2v.669c.286-.219 1-.668 2-.668.648 0 2 .388 2 2.732v4.267z"> </path> </svg> </span> <a class="block py-2 hover:text-secondary" href="https://www.linkedin.com/in/wallace-de-souza-vizerra-0144a859/" target="_blank">Linkedin</a> </li> <li class="flex gap-3 items-center"> <span class="p-1 rounded bg-secondary"> <svg fill="currentColor" class="w-4 h-4" src="tailwindcss.svg" xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 1024 1024"> <path d="M828.4 107.8c-.2 20.7-5.5 42.7-16.1 66.7-14.7 33.3-40.4 64.4-73.3 88.6-8.1 5.9-24.7 16.9-25.6 16.9-.3 0-1.8.9-3.4 2-2.6 1.9-34.4 18-35.4 18-.3 0-2.9 1.1-5.8 2.4-22.7 10.1-64.2 22.5-97.3 29-12.5 2.5-39.7 7-48 8-2.2.3-7.6.9-12 1.5-10 1.3-14.2 1.7-35.7 3.6-2.9.2-9.8.7-15.3 1-26.7 1.5-43.6 2.8-52.5 4-1.4.2-4.5.7-7 1-5.9.8-9.9 1.4-13 2-1.4.3-4.1.7-6 1.1-1.9.3-3.9.7-4.5.8-.5.2-2.8.6-5 1-23.4 4.5-61.7 16.5-82.2 25.7-2.3 1-4.5 1.9-4.8 1.9-.7 0-28.4 13.8-34 17-63.1 35.5-110.7 84.2-140.2 143.2-15.9 32-25.1 63.3-30.8 105.6-2.6 19-2.7 63.5-.1 83.2.3 1.9.7 5.9 1 8.9.4 3 1.1 8.4 1.7 12 .6 3.6 1.2 7.7 1.4 9.1.7 4.3 3.3 17.4 3.9 19 .3.8.7 2.8.9 4.5.6 3.5 5.2 22.1 7.2 28.5.7 2.5 2.3 7.9 3.5 12 2.9 9.9 11.8 28.3 18.9 38.9 6.7 10.3 20.3 24.4 28.6 29.8 7.5 4.9 17.8 10.3 19.6 10.3 1.6 0 2.7-1.6 7.7-11 12.4-23.1 30.4-52.9 48.5-80 8.2-12.4 15.3-22.7 15.7-23 .3-.3 2.8-3.6 5.4-7.4 11.6-16.7 38.4-49.7 54.6-67.1 14.8-16 44.8-45 56-54.2 1.4-1.2 5.4-4.5 9-7.5 8.8-7.3 21.9-17.2 31.3-23.8 4.2-2.9 7.7-5.7 7.7-6.2s-1.3-3.4-2.9-6.6c-6.9-13.7-14.9-40.5-18.1-60.2-.7-4.1-1.4-8.2-1.5-9-.1-.8-.6-4.6-1-8.3-.3-3.7-.8-7.7-1-8.8-.2-1.1-.7-6.5-1.1-12.2-.3-5.6-.8-10.4-.9-10.7-.2-.3 0-1.2.5-1.9.6-1 1-.8 1.5 1 1 3.4 16.7 34.6 22.8 45.4 11.8 21 31.9 51.5 34 51.5.4 0 4-1.8 8-4 23-12.8 52.1-25.5 78.7-34.3 11.8-4 33.6-10.2 39.5-11.3 2.8-.5 5.3-1.1 10.5-2.3 2.5-.5 5.9-1.2 7.5-1.5 1.7-.3 4.1-.8 5.5-1.1 3.4-.7 27.4-4.3 33.5-5 15.2-1.8 37.2-2.9 56.5-2.9 19.4 0 48.1 1.1 48.9 1.9.2.3-.3.6-1.2.6-.9.1-2 .2-2.4.3-3.3.8-7.3 1.6-9.8 2.1-6.1 1-26.4 5.6-39 9-64.9 17-124.3 43.7-177 79.4-6 4.1-12.1 8.2-13.4 9.3l-2.4 1.8 12.4 5.9c10.9 5.2 28.2 11.6 40.4 14.9 9.2 2.6 19.2 5.1 22 5.5 1.7.3 6.4 1.2 10.5 2.1 7.1 1.4 15.1 2.8 23 4.1 1.9.3 4.6.7 6 1 1.4.2 4.5.7 7 1 2.5.4 5.6.8 7 1 1.4.2 5.3.7 8.8 1 3.5.4 7.1.8 8.1 1 1 .2 5.1.6 9.2.9 10.1.9 14.1 1.4 14.7 2.1.3.3-1.5.5-3.9.6-2.4 0-5.2.2-6.2.4-2.1.4-13.9 1.2-30.7 2.2-24.2 1.4-70 .7-88-1.3-4.1-.4-18.7-2.7-25-3.9-12.5-2.3-27.4-6.8-37.3-11.1-4.3-1.9-8.1-3.4-8.6-3.4-.4 0-1.6.8-2.7 1.7-1 1-3.7 3.3-5.9 5.2-16.6 14.1-42.2 39.5-59.2 58.6-22.8 25.7-53.6 67.2-68.8 92.5-2.1 3.6-4.3 6.6-4.7 6.8-.4.2-.8.7-.8 1.1 0 .5-2.4 4.8-5.4 9.7-15.6 26.1-49.3 91.5-48 93.5.2.3 4.7 2.1 10.1 3.8 5.4 1.8 10.7 3.6 11.8 4.1 5.8 2.5 45.8 13.8 64 18.1 11.8 2.7 12.6 2.9 15.5 3.5 1.4.2 4.5.9 7 1.4 6.6 1.5 13.7 2.8 30 5.5 3.7.7 24.8 3.3 30.5 3.9 2.8.3 8.4.9 12.5 1.3 16.3 1.6 79.2.8 91.3-1.2 1.2-.2 5.8-.9 10.2-1.5 24.8-3.5 42.3-7.6 66.5-15.7 5.8-1.9 13.4-4.6 17-6 8.6-3.3 34.4-15.6 34.8-16.6.2-.4.8-.7 1.3-.7 1.4 0 20.5-11.6 30.3-18.4 18-12.6 28.7-21.6 46.6-39.6 28.2-28.1 51.1-59.3 77.5-105.5 4.3-7.5 17.8-34.7 22.5-45.5 10-22.7 23.6-60.2 28.6-79 5.9-22 9.5-36.4 12-48.5.6-2.8 4.5-24.5 5-27.5.2-1.4.7-4.1 1-6 .3-1.9.8-4.9 1-6.5.2-1.7.6-4.6.9-6.5 1.5-10 3.5-26.2 4-33.5.3-3.9.8-8.9 1-11.2 2.2-22.5 3.3-80.3 2.1-104.3-.3-4.1-.7-12.9-1.1-19.5-.3-6.6-.8-13.6-1-15.5-.2-1.9-.6-7.6-1-12.5-.3-5-.8-10.1-1-11.5-.2-1.4-.6-5.7-1-9.5-.7-7.2-1.2-11.3-2-17.5-.2-1.9-.7-5.5-1-8-.6-4.6-4.3-29.5-5.1-34-.2-1.4-.9-5.4-1.5-9-.5-3.6-1.6-9.7-2.4-13.5-.8-3.9-1.7-8.4-2-10-1.2-6.8-1.8-9.7-5-24.8-1.9-8.7-4.7-20.4-6.1-26-1.4-5.6-2.7-10.9-2.9-11.7-3-14.7-23.2-81-25.3-83.2-.4-.4-.7 2.3-.8 6z" /> </svg> </span> <a class="block py-2 hover:text-secondary" href="https://tailwindcomponents.com/u/wallace-maxters" target="_blank">Tailwind Components</a> </li> <li class="flex gap-3 items-center"> <span class="p-1 rounded bg-secondary"> <svg fill="currentColor" class="w-4 h-4" src="codepen.svg" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 128 128"> <g clip-rule="evenodd"> <path fill="none" d="M0 0h128v128H0z" /> <path fill="currentColor" fill-rule="evenodd" d="M117 73.204 103.24 64 117 54.796v18.408zM69.5 112.22V86.568L93.348 70.62l19.248 12.872L69.5 112.22zM64 77.012 44.548 64 64 50.988 83.456 64 64 77.012zm-5.5 35.208L15.404 83.492 34.656 70.62 58.5 86.568v25.652zM11 54.796 24.764 64 11 73.204V54.796zM58.5 15.78v25.652L34.656 57.384 15.404 44.508 58.5 15.78zm11 0 43.096 28.728-19.248 12.876L69.5 41.432V15.78zm58.452 28.004c-.012-.084-.032-.16-.044-.24-.028-.156-.056-.312-.096-.46-.024-.092-.06-.18-.088-.268-.044-.136-.088-.268-.14-.4-.036-.092-.08-.184-.124-.268-.056-.128-.116-.248-.188-.364-.048-.088-.104-.172-.156-.256-.072-.116-.148-.228-.232-.336-.06-.08-.124-.16-.188-.236-.088-.104-.18-.204-.276-.3-.072-.072-.14-.148-.216-.212-.104-.092-.208-.18-.312-.264-.084-.064-.164-.128-.248-.188-.032-.02-.06-.048-.092-.068l-58.5-39c-1.848-1.232-4.252-1.232-6.104 0l-58.496 39c-.032.02-.06.048-.092.068-.088.06-.168.124-.248.188-.108.084-.212.172-.312.264-.076.064-.148.14-.22.212-.096.096-.188.196-.272.3-.068.076-.132.156-.192.236-.08.108-.156.22-.228.336-.056.084-.108.168-.16.256-.068.116-.128.236-.188.364-.04.084-.084.176-.12.268-.056.132-.1.264-.144.4-.028.088-.06.176-.084.268-.04.148-.068.304-.096.46-.016.08-.036.156-.044.24-.032.232-.052.472-.052.716v39c0 .24.02.48.052.72.008.076.028.156.044.236.028.156.056.308.096.46.024.092.056.18.084.268.044.132.088.268.144.404.036.088.08.176.12.264.06.124.12.244.188.368.052.084.104.168.16.252.072.116.148.224.228.332.06.084.124.164.192.24.084.1.176.204.272.296.072.076.144.148.22.216.1.092.204.18.312.264.08.064.16.128.248.188.032.02.06.048.092.068l58.496 39c.924.616 1.988.924 3.052.924s2.128-.308 3.052-.924l58.5-39c.032-.02.06-.048.092-.068.084-.06.164-.124.248-.188.104-.084.208-.172.312-.264.076-.068.144-.14.216-.216.096-.092.188-.196.276-.296.064-.076.128-.156.188-.24.084-.108.16-.216.232-.332.052-.084.108-.168.156-.252.072-.124.132-.244.188-.368.044-.088.088-.176.124-.264.052-.136.096-.272.14-.404.028-.088.064-.176.088-.268.04-.152.068-.304.096-.46.012-.08.032-.16.044-.236.032-.24.048-.48.048-.72v-39c0-.244-.016-.484-.048-.716z" /> </g> </svg> </span> <a class="block py-2 hover:text-secondary" href="https://codepen.io/wallacemaxters/" target="_blank">Codepen.io</a> </li> <li class="flex gap-3 items-center"> <span class="p-1 rounded bg-secondary"> <svg fill="currentColor" class="w-4 h-4" src="youtube.svg" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-youtube" viewBox="0 0 24 24"> <path fill="none" d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"/> <path stroke="none" d="m9.75 15.02 5.75-3.27-5.75-3.27v6.54z"/> </svg> </span> <a class="block py-2 hover:text-secondary" href="https://www.youtube.com/@maxtersdev" target="_blank">Youtube</a> </li> </ul> </nav> <nav> <h4 class="font-light text-xl">Ferramentas Úteis</h4> <ul> <li class="flex gap-3 items-center"> <span class="p-1 rounded bg-secondary"> <svg fill="currentColor" class="w-4 h-4" src="logo.svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 92.603996 41.444"> <path fill="currentColor" d="M64.518 2.136C63.761.348 55.955-2.541 53.375 8.98L39.754 19.196 19.381 31.394l1.02.353 2.708-.79-4.3 2.54 1.41.487 14.585-4.333s6.578.897 11.705.9l-.725 1.45c-.244.49 1.82 5.377 2.583 7.703l-3.858.587c-.458.07-.263.764.193.696l4.06-.617 4.06.617c.457.068.65-.627.193-.696l-3.89-.593-.177-.6-.69-2.337-1.291-4.368-.01-.026c.156-.313 5.077-2.555 5.077-2.555h-.002c17.878-6.436 8.032-21.19 11.8-23.48 1.584-.963 7.017-2.407 7.017-2.407 0-1.644-6.33-1.79-6.33-1.79zm-46.34 39.308v-2.768L1.603 20.872v-.3L18.178 2.768V0L0 19.488v2.468zm56.248 0v-2.768l16.562-17.804v-.3L74.426 2.768V0l18.178 19.488v2.468z"/> </svg> </span> <a class="block py-2 hover:text-secondary" href="https://wallacemaxters.com.br/tools/hex-para-rgb" target="_blank">Conversor de cores HEX para RGB</a> </li> <li class="flex gap-3 items-center"> <span class="p-1 rounded bg-secondary"> <svg fill="currentColor" class="w-4 h-4" src="logo.svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 92.603996 41.444"> <path fill="currentColor" d="M64.518 2.136C63.761.348 55.955-2.541 53.375 8.98L39.754 19.196 19.381 31.394l1.02.353 2.708-.79-4.3 2.54 1.41.487 14.585-4.333s6.578.897 11.705.9l-.725 1.45c-.244.49 1.82 5.377 2.583 7.703l-3.858.587c-.458.07-.263.764.193.696l4.06-.617 4.06.617c.457.068.65-.627.193-.696l-3.89-.593-.177-.6-.69-2.337-1.291-4.368-.01-.026c.156-.313 5.077-2.555 5.077-2.555h-.002c17.878-6.436 8.032-21.19 11.8-23.48 1.584-.963 7.017-2.407 7.017-2.407 0-1.644-6.33-1.79-6.33-1.79zm-46.34 39.308v-2.768L1.603 20.872v-.3L18.178 2.768V0L0 19.488v2.468zm56.248 0v-2.768l16.562-17.804v-.3L74.426 2.768V0l18.178 19.488v2.468z"/> </svg> </span> <a class="block py-2 hover:text-secondary" href="https://maxters.dev/tools/base-64-converter" target="_blank">Codificador e Decodificador de Base64</a> </li> </ul> </nav> </div></div> </footer> <script src="/livewire/livewire.js?id=90730a3b0e7144480175" data-turbo-eval="false" data-turbolinks-eval="false" ></script><script data-turbo-eval="false" data-turbolinks-eval="false" >window.livewire = new Livewire();window.Livewire = window.livewire;window.livewire_app_url = '';window.livewire_token = 'VFC1872xOHfDoackDDBWNPSvyMJNClYLgYMbwtg3';window.deferLoadingAlpine = function (callback) {window.addEventListener('livewire:load', function () {callback();});};let started = false;window.addEventListener('alpine:initializing', function () {if (! started) {window.livewire.start();started = true;}});document.addEventListener("DOMContentLoaded", function () {if (! started) {window.livewire.start();started = true;}});</script> </body> </html>