tailwind css Buttons

by Imri Paloja

HTML

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css">
<div class="container text-[#454545] p-2">

  <h1 class="text-4xl/7 font-bold sm:truncate sm:text-3xl sm:tracking-tight p-2 m-2">Tailwind css Buttons</h1>

  <h2 class="text-2xl/7 font-bold sm:truncate sm:text-3xl sm:tracking-tight">
    Input types
  </h2>

  <form name="EuroCMSForms" action="">

<hr class="bg-eb-dark mt-4 mb-4 border border-gray-800">

  <h3 class="text-xl/7 font-bold sm:truncate sm:text-3xl sm:tracking-tight">
    Button
  </h3>


    <label for="button">button</label>
    <input class="cursor-pointer w-full bg-gray-200 placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md px-3 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-300 shadow-sm focus:shadow" type="button" id="button" name="button" value="Click Me!">

<hr class="bg-eb-dark mt-4 mb-4 border border-gray-800">


  <h3 class="text-xl/7 font-bold sm:truncate sm:text-3xl sm:tracking-tight">
    checkboxes
  </h2>

<div class="inline-flex items-center">
  <label class="flex items-center cursor-pointer relative">
    <input type="checkbox" checked class="peer h-5 w-5 cursor-pointer transition-all appearance-none rounded shadow hover:shadow-md border border-slate-300 checked:bg-blue-600 checked:border-blue-600" id="check1" />
    <span class="absolute text-white opacity-0 peer-checked:opacity-100 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor" stroke="currentColor" stroke-width="1">
      <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
    </svg>
    </span>
 ...

CSS

[disabled] {
  border: inset 1px #CCCCCC;
  /* border-style: inset;
  border-color: #e8ecf2; */
}