0

Eu gostaria de criar um espaço entre Register e Remember, mas não está funcionando.

<head>
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <div classs="container ">
    <div class="flex flex-col min-h-screen  space-y-4 border-2 items-center justify-center py-12 px-4">  
    <h2 class="text-center text-3xl font-extrabold text-gray-900">Todo Authentication</h2>
        <input type="text" class="border w-2/5 py-2 px-2 focus:placeholder-black " placeholder="Username" />
        <input type="password" class="border  w-2/5 py-2 px-2 focus:placeholder-black " placeholder="Password" />
        <div class="flex w-2/5 justify-between">
          <a href="">Register</a>
          <span class="space-x-2">
         <input type="checkbox">
Remember

</span>
         </div>
        <button class="border w-2/5 p-4 text-lg font-bold bg-blue-200 border-black rounded">Log in</button>
    </div>
  </div>
</body>

Atualização

Resolvi o problema colocando uma width entre esses elementos.

2
  • Como assim espaço, que tipo de espaço, só uma pequena margem? Ou um de um lado e o outro do outro? Não ficou muito claro o que vc realmente pretendo como resultado final
    – hugocsl
    31/12/2020 às 20:20
  • Eu atualizei o resultado com o FIX que eu queria
    – Hasunohana
    31/12/2020 às 21:39

1 Resposta 1

0

Eu lhe sugiro criar um novo arquivo para colocar estilos que você precisar e colocar de acordo com um nome/classe/id

Sem o arquivo você pode usar o style="propriedade:valor, para o que você quer, que é criar um espaço ficaria style="margin-right: 10px" ao colocar na tag <a> ou então style="margin-left: 10px" para a tag <input>

Aqui está dois exemplos para cada tag, (supondo que você irá estilizar a partir do html mesmo)

<head>
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <div classs="container ">
    <div class="flex flex-col min-h-screen  space-y-4 border-2 items-center justify-center py-12 px-4">  
    <h2 class="text-center text-3xl font-extrabold text-gray-900">Todo Authentication</h2>
        <input type="text" class="border w-2/5 py-2 px-2 focus:placeholder-black " placeholder="Username" />
        <input type="password" class="border  w-2/5 py-2 px-2 focus:placeholder-black " placeholder="Password" />
        <div class="flex justify-between">
          <a href="" style="margin-right: 10px">Register</a>
          <input type="checkbox">Remember
        </div>
        <button class="border w-2/5 p-4 text-lg font-bold bg-blue-200 border-black rounded">Log in</button>
    </div>
  </div>
</body>

<head>
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <div classs="container ">
    <div class="flex flex-col min-h-screen  space-y-4 border-2 items-center justify-center py-12 px-4">  
    <h2 class="text-center text-3xl font-extrabold text-gray-900">Todo Authentication</h2>
        <input type="text" class="border w-2/5 py-2 px-2 focus:placeholder-black " placeholder="Username" />
        <input type="password" class="border  w-2/5 py-2 px-2 focus:placeholder-black " placeholder="Password" />
        <div class="flex justify-between">
          <a href="">Register</a>
          <input type="checkbox" style="margin-left: 10px">Remember
        </div>
        <button class="border w-2/5 p-4 text-lg font-bold bg-blue-200 border-black rounded">Log in</button>
    </div>
  </div>
</body>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .