How to make pseudo line in tailwind?

Admin 1
Viewed 200

I have a block:

<div class="height: 400px; padding-left: 20px"></div>

How to make vertical line on the left side of block using tailwind?

I try to achive this:

enter image description here

tailwind-3 tailwind-css
2 Answers

You can do it with to divs. You have to use flex box (flex) system to align the to divs next to each other. Then you can set the height h-[400] and the padding pl-[20]. pl-* means padding-left.

example 

<script src="https://cdn.tailwindcss.com"></script>
<div class="flex h-[400px] p-2">
  <div class="bg-blue-700 w-1"></div>
  <div class="pl-[20px]">Hello</div>
</div>

height:auto;

<script src="https://cdn.tailwindcss.com"></script>
<div class="flex h-auto p-2">
  <div class="bg-blue-700 w-1"></div>
  <div class="pl-[20px]">Hello</div>
</div>

user_148071110

I'm not sure if I understand your question well, but need to read tailwind docs to understand how tailwind works, so here is what I did I hope it's what you are looking for :

<script src="https://cdn.tailwindcss.com"></script>
<div class='h-screen w-screen'>

<div class="h-[400px]  bg-green-300 w-[20px]"></div>

</div>

user_182545380
Related