I had a 4 rows of three buttons each.
Tailwind play link
that when I click any ONE of the 3 buttons in the first row, then click any ONE of the 3 buttons in the next row, and then for the last two rows also , if I click any one button in these rows .
They all the clicked buttons should remained highlighted.
How can I achieve this in tailwind css.
I had searched and found focused state but as soon as I click any button in the second row , the highlight thing vanished in the button selected in previous row.
<div class="relative flex min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12 space-y-6">
<div class="bg-slate-50 px-28 ">
<button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login21</button>
<button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login22</button>
<button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login23</button>
</div>
<div class="bg-slate-50 px-28 ">
<button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login31</button>
<button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login32</button>
<button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login33</button>
</div>
<div class="bg-slate-50 px-28 ">
<button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login41</button>
<button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login42</button>
<button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login43</button>
</div>
<div class="bg-slate-50 px-28 ">
<button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login51</button>
<button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login52</button>
<button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login53</button>
</div>
</div>
Tailwind play link
I fix it by input[type=radio]
see HTML and CSS in Tailwind play: https://play.tailwindcss.com/ALXtlFabvI