I am using Tailwind CSS and creating an HTML component for the first time and I found one admin template and now I want to add Heading Section before the sidebar which can be visible every time and the sidebar start after Heading Section.
I am not able to achieve with HTML so can someone help me with this HTML.
HTML:
openSidebar = (flag) => {
let sidebar = document.getElementById("sidebar");
flag ? sidebar.classList.add("hidden") : sidebar.classList.remove("hidden");
};
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<div style="min-height: 1100px">
<div onclick="openSidebar(false)" class="flex items-center justify-center rounded-r-md bg-gray-800 text-gray-300 ml-0 cursor-pointer absolute inset-0 mt-10 m-auto w-8 h-8">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-right" width="28" height="28" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" />
<polyline points="9 6 15 12 9 18" />
</svg>
</div>
<div id="sidebar" class="overflow-y-scroll lg:overflow-y-auto fixed lg:sticky h-screen lg:h-auto z-40 top-0 bg-gray-900 pt-10 w-64 lg:w-72">
<div class="px-8">
<div class="flex items-center justify-between">
<div class="w-32">
<img class="w-full" src="https://cdn.tuk.dev/assets/components/todos/logo.png" alt="quicklist logo" />
</div>
<div onclick="openSidebar(true)" class="text-gray-700 ml-8 cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-left" width="32" height="32" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<polyline points="15 6 9 12 15 18"></polyline>
</svg>
</div>
</div>
<ul class="my-10 flex flex-wrap">
<li class="w-1/2 flex justify-start mb-6">
<a href="javascript:void(0)" class="bg-gray-700 rounded-md text-gray-300 flex flex-col justify-center items-center w-20 h-20 p-4">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-layout-kanban" width="28" height="28" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<line x1="4" y1="4" x2="10" y2="4"></line>
<line x1="14" y1="4" x2="20" y2="4"></line>
<rect x="4" y="8" width="6" height="12" rx="2"></rect>
<rect x="14" y="8" width="6" height="6" rx="2"></rect>
</svg>
<p class="mt-1 uppercase font-semibold text-xs">kanban</p>
</a>
</li>
<li class="w-1/2 flex justify-end mb-6">
<a href="javascript:void(0)" class="bg-transparent rounded-md text-gray-600 flex flex-col justify-center items-center w-20 h-20 p-4">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-inbox" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<rect x="4" y="4" width="16" height="16" rx="2"></rect>
<path d="M4 13h3l3 3h4l3 -3h3"></path>
</svg>
<p class="mt-1 uppercase font-semibold text-xs">inbox</p>
</a>
</li>
<li class="w-1/2 flex justify-start mb-6">
<a href="javascript:void(0)" class="rounded-md bg-transparent text-gray-600 flex flex-col justify-center items-center w-20 h-20 p-4">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-notebook" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<path d="M6 4h11a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-11a1 1 0 0 1 -1 -1v-14a1 1 0 0 1 1 -1m3 0v18"></path>
<line x1="13" y1="8" x2="15" y2="8"></line>
<line x1="13" y1="12" x2="15" y2="12"></line>
</svg>
<p class="mt-1 uppercase font-semibold text-xs">notebook</p>
</a>
</li>
<li class="w-1/2 flex justify-end mb-6">
<a href="javascript:void(0)" class="rounded-md bg-transparent text-gray-600 flex flex-col justify-center items-center w-20 h-20 p-4">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-calendar-event" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<rect x="4" y="5" width="16" height="16" rx="2"></rect>
<line x1="16" y1="3" x2="16" y2="7"></line>
<line x1="8" y1="3" x2="8" y2="7"></line>
<line x1="4" y1="11" x2="20" y2="11"></line>
<rect x="8" y="15" width="2" height="2"></rect>
</svg>
<p class="mt-1 uppercase font-semibold text-xs">calendar</p>
</a>
</li>
<li class="w-1/2 flex justify-start">
<a href="javascript:void(0)" class="rounded-md bg-transparent text-gray-600 flex flex-col justify-center items-center w-20 h-20 p-4">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-star" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z"></path>
</svg>
<p class="mt-1 uppercase font-semibold text-xs">important</p>
</a>
</li>
<li class="w-1/2 flex justify-end">
<a href="javascript:void(0)" class="rounded-md bg-transparent text-gray-600 flex flex-col justify-center items-center w-20 h-20 p-4">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-stack" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<polyline points="12 4 4 8 12 12 20 8 12 4"></polyline>
<polyline points="4 12 12 16 20 12"></polyline>
<polyline points="4 16 12 20 20 16"></polyline>
</svg>
<p class="mt-1 uppercase font-semibold text-xs">projects</p>
</a>
</li>
</ul>
<div class="flex items-center justify-between text-gray-600">
<h4 class="uppercase font-semibold">List</h4>
<svg xmlns="http://www.w3.org/2000/svg" class="cursor-pointer icon icon-tabler icon-tabler-plus" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
</div>
<ul class="text-gray-600 mt-8">
<li class="mb-5">Grocery Items</li>
<li class="mb-5">Family</li>
<li>Friends</li>
</ul>
<div class="my-20">
<div class="flex items-center justify-between text-gray-600">
<h4 class="uppercase font-semibold">Labels</h4>
<svg xmlns="http://www.w3.org/2000/svg" class="cursor-pointer icon icon-tabler icon-tabler-plus" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
</div>
<ul class="text-gray-600 mt-8">
<li class="mb-5 flex items-center">
<span class="mr-2 w-2 h-2 rounded-full bg-indigo-600"></span>
Work Related
</li>
<li class="mb-5 flex items-center">
<span class="mr-2 w-2 h-2 rounded-full bg-yellow-600"></span>
Family
</li>
<li class="mb-5 flex items-center">
<span class="mr-2 w-2 h-2 rounded-full bg-green-500"></span>
Friends
</li>
<li class="mb-5 flex items-center">
<span class="mr-2 w-2 h-2 rounded-full bg-purple-600"></span>
Grocery
</li>
<li class="mb-5 flex items-center">
<span class="mr-2 w-2 h-2 rounded-full bg-blue-600"></span>
Utilities
</li>
<li class="mb-5 flex items-center">
<span class="mr-2 w-2 h-2 rounded-full bg-pink-600"></span>
Rental
</li>
<li class="mb-5 flex items-center">
<span class="mr-2 w-2 h-2 rounded-full bg-red-600"></span>
Maintenance
</li>
</ul>
</div>
</div>
<div class="px-8 py-4 w-full border-t border-gray-800 flex items-center text-gray-600 uppercase text-xs">
<svg xmlns="http://www.w3.org/2000/svg" class="cursor-pointer icon icon-tabler icon-tabler-trash" width="18" height="18" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<line x1="4" y1="7" x2="20" y2="7"></line>
<line x1="10" y1="11" x2="10" y2="17"></line>
<line x1="14" y1="11" x2="14" y2="17"></line>
<path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"></path>
<path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
</svg>
<p class="cursor-pointer pl-2">trash</p>
</div>
</div>
</div>
Is this what you want?
<div class="w-full bg-gray-300">
<h1 class="text-7xl text-white text-center">HEADING AREA</h1>
</div>
<div style="min-height: 1100px">
<div onclick="openSidebar(false)"
class="flex items-center justify-center rounded-r-md bg-gray-800 text-gray-300 ml-0 cursor-pointer absolute inset-0 mt-10 m-auto w-8 h-8">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-right" width="28" height="28"
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" />
<polyline points="9 6 15 12 9 18" />
</svg>
</div>
<div id="sidebar"
class="overflow-y-scroll lg:overflow-y-auto fixed lg:sticky h-screen lg:h-auto z-40 top-0 bg-gray-900 pt-10 w-64 lg:w-72">
<div class="px-8">
<div class="flex items-center justify-between">
<div class="w-32">
<img class="w-full" src="https://cdn.tuk.dev/assets/components/todos/logo.png" alt="quicklist logo" />
</div>
<div onclick="openSidebar(true)" class="text-gray-700 ml-8 cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-left" width="32"
height="32" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<polyline points="15 6 9 12 15 18"></polyline>
</svg>
</div>
</div>
<ul class="my-10 flex flex-wrap">
<li class="w-1/2 flex justify-start mb-6">
<a href="javascript:void(0)"
class="bg-gray-700 rounded-md text-gray-300 flex flex-col justify-center items-center w-20 h-20 p-4">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-layout-kanban" width="28"
height="28" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<line x1="4" y1="4" x2="10" y2="4"></line>
<line x1="14" y1="4" x2="20" y2="4"></line>
<rect x="4" y="8" width="6" height="12" rx="2"></rect>
<rect x="14" y="8" width="6" height="6" rx="2"></rect>
</svg>
<p class="mt-1 uppercase font-semibold text-xs">kanban</p>
</a>
</li>
<li class="w-1/2 flex justify-end mb-6">
<a href="javascript:void(0)"
class="bg-transparent rounded-md text-gray-600 flex flex-col justify-center items-center w-20 h-20 p-4">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-inbox" width="20" height="20"
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<rect x="4" y="4" width="16" height="16" rx="2"></rect>
<path d="M4 13h3l3 3h4l3 -3h3"></path>
</svg>
<p class="mt-1 uppercase font-semibold text-xs">inbox</p>
</a>
</li>
<li class="w-1/2 flex justify-start mb-6">
<a href="javascript:void(0)"
class="rounded-md bg-transparent text-gray-600 flex flex-col justify-center items-center w-20 h-20 p-4">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-notebook" width="20"
height="20" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<path d="M6 4h11a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-11a1 1 0 0 1 -1 -1v-14a1 1 0 0 1 1 -1m3 0v18"></path>
<line x1="13" y1="8" x2="15" y2="8"></line>
<line x1="13" y1="12" x2="15" y2="12"></line>
</svg>
<p class="mt-1 uppercase font-semibold text-xs">notebook</p>
</a>
</li>
<li class="w-1/2 flex justify-end mb-6">
<a href="javascript:void(0)"
class="rounded-md bg-transparent text-gray-600 flex flex-col justify-center items-center w-20 h-20 p-4">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-calendar-event" width="20"
height="20" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<rect x="4" y="5" width="16" height="16" rx="2"></rect>
<line x1="16" y1="3" x2="16" y2="7"></line>
<line x1="8" y1="3" x2="8" y2="7"></line>
<line x1="4" y1="11" x2="20" y2="11"></line>
<rect x="8" y="15" width="2" height="2"></rect>
</svg>
<p class="mt-1 uppercase font-semibold text-xs">calendar</p>
</a>
</li>
<li class="w-1/2 flex justify-start">
<a href="javascript:void(0)"
class="rounded-md bg-transparent text-gray-600 flex flex-col justify-center items-center w-20 h-20 p-4">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-star" width="20" height="20"
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<path
d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z">
</path>
</svg>
<p class="mt-1 uppercase font-semibold text-xs">important</p>
</a>
</li>
<li class="w-1/2 flex justify-end">
<a href="javascript:void(0)"
class="rounded-md bg-transparent text-gray-600 flex flex-col justify-center items-center w-20 h-20 p-4">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-stack" width="20" height="20"
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<polyline points="12 4 4 8 12 12 20 8 12 4"></polyline>
<polyline points="4 12 12 16 20 12"></polyline>
<polyline points="4 16 12 20 20 16"></polyline>
</svg>
<p class="mt-1 uppercase font-semibold text-xs">projects</p>
</a>
</li>
</ul>
<div class="flex items-center justify-between text-gray-600">
<h4 class="uppercase font-semibold">List</h4>
<svg xmlns="http://www.w3.org/2000/svg" class="cursor-pointer icon icon-tabler icon-tabler-plus" width="20"
height="20" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
</div>
<ul class="text-gray-600 mt-8">
<li class="mb-5">Grocery Items</li>
<li class="mb-5">Family</li>
<li>Friends</li>
</ul>
<div class="my-20">
<div class="flex items-center justify-between text-gray-600">
<h4 class="uppercase font-semibold">Labels</h4>
<svg xmlns="http://www.w3.org/2000/svg" class="cursor-pointer icon icon-tabler icon-tabler-plus" width="20"
height="20" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
</div>
<ul class="text-gray-600 mt-8">
<li class="mb-5 flex items-center">
<span class="mr-2 w-2 h-2 rounded-full bg-indigo-600"></span>
Work Related
</li>
<li class="mb-5 flex items-center">
<span class="mr-2 w-2 h-2 rounded-full bg-yellow-600"></span>
Family
</li>
<li class="mb-5 flex items-center">
<span class="mr-2 w-2 h-2 rounded-full bg-green-500"></span>
Friends
</li>
<li class="mb-5 flex items-center">
<span class="mr-2 w-2 h-2 rounded-full bg-purple-600"></span>
Grocery
</li>
<li class="mb-5 flex items-center">
<span class="mr-2 w-2 h-2 rounded-full bg-blue-600"></span>
Utilities
</li>
<li class="mb-5 flex items-center">
<span class="mr-2 w-2 h-2 rounded-full bg-pink-600"></span>
Rental
</li>
<li class="mb-5 flex items-center">
<span class="mr-2 w-2 h-2 rounded-full bg-red-600"></span>
Maintenance
</li>
</ul>
</div>
</div>
<div class="px-8 py-4 w-full border-t border-gray-800 flex items-center text-gray-600 uppercase text-xs">
<svg xmlns="http://www.w3.org/2000/svg" class="cursor-pointer icon icon-tabler icon-tabler-trash" width="18"
height="18" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<line x1="4" y1="7" x2="20" y2="7"></line>
<line x1="10" y1="11" x2="10" y2="17"></line>
<line x1="14" y1="11" x2="14" y2="17"></line>
<path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"></path>
<path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
</svg>
<p class="cursor-pointer pl-2">trash</p>
</div>
</div>
</div>
Related
Top: How it looks on iOS Chrome
Bottom: How it looks on PC Chrome
I've referenced this post, and added appearance: none; inline to my button.
Full Tailwind styling of the element:
<button class="sm:max-w-30 relative inline-flex h-9 w-full min-w-[130px] items-center justify-start rounded-md border border-slate-400 bg-transparent py-2 px-4 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2" style="appearance: none;">
<svg xmlns="http://www.w3.org/2000/svg" width="1.3em" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
搜索文章
</button>
I have built a file upload in html but clicking the html element doesn't show up the upload dialog, have no idea why is it?
<div class="flex flex-col my-1">
<div tabindex="0" class="dropzone cursor-pointer focus-within:ring-2 flex flex-col justify-center items-center text-center rounded-lg w-full mt-4">
<input accept="image/bmp,image/gif,image/heic,image/jpeg,image/png,image/svg+xml,image/webp" type="file" autocomplete="off" tabindex="-1" style="display: none;">
<div class="bg-brand rounded-lg focus:outline-none focus:shadow-none flex w-full p-2 h-full">
<div class="p-8 focus:outline-none focus:shadow-none relative p-3 focus:outline-none focus:shadow-none border-2 border-dashed w-full flex flex-col justify-center items-center rounded-lg text-xs border-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" class="mb-4" width="36" height="36" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<line x1="15" y1="8" x2="15.01" y2="8"></line>
<rect x="4" y="4" width="16" height="16" rx="3"></rect>
<path d="M4 15l4 -4a3 5 0 0 1 3 0l5 5"></path>
<path d="M14 14l1 -1a3 5 0 0 1 3 0l2 2"></path>
</svg>
<span>Drag and drop an image or click to upload</span>
<div aria-hidden="true" class="whitespace-nowrap overflow-hidden text-sm invisible h-0">Drag and drop an image or click to upload</div>
</div>
</div>
</div>
</div>
You can associate a label with an input elsewhere in the code, by assigning an id to the input tag, and referencing that id in the for attribute of the label. Or you can wrap an input tag with the label element, and it will do the same
For eg:
<input id="fileUpload" style="display:none">
...
...
Some Code
...
...
<label for="fileUpload">Upload File</label>
In your case, you can opt for the second option. Instead of wrapping the hidden input element in a div element wrap it in a label element. That will allow you to trigger the input inside the label when any point in the label is clicked.
<div class="flex flex-col my-1">
<!-- Changed this from div to label. Also added a style of cursor:pointer -->
<label tabindex="0" class="dropzone cursor-pointer focus-within:ring-2 flex flex-col justify-center items-center text-center rounded-lg w-full mt-4" style="cursor:pointer">
<input accept="image/bmp,image/gif,image/heic,image/jpeg,image/png,image/svg+xml,image/webp" type="file" autocomplete="off" tabindex="-1" style="display: none;">
<div class="bg-brand rounded-lg focus:outline-none focus:shadow-none flex w-full p-2 h-full">
<div class="p-8 focus:outline-none focus:shadow-none relative p-3 focus:outline-none focus:shadow-none border-2 border-dashed w-full flex flex-col justify-center items-center rounded-lg text-xs border-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" class="mb-4" width="36" height="36" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<line x1="15" y1="8" x2="15.01" y2="8"></line>
<rect x="4" y="4" width="16" height="16" rx="3"></rect>
<path d="M4 15l4 -4a3 5 0 0 1 3 0l5 5"></path>
<path d="M14 14l1 -1a3 5 0 0 1 3 0l2 2"></path>
</svg>
<span>Drag and drop an image or click to upload</span>
<div aria-hidden="true" class="whitespace-nowrap overflow-hidden text-sm invisible h-0">Drag and drop an image or click to upload</div>
</div>
</div>
</label>
</div>
I am trying to make add the circles using the Tailwind Grid system. For the 5 option, it works fine but if I add 1 more circle the style collapse. I want to add a new Circle on the start name as None. How can I fix the styling?
Here is the Output:
https://play.tailwindcss.com/sgDu7UoViA
Should be like this:
Code:
.svg {
fill: currentColor;
height: auto;
max-width: 66vmin;
transform-origin: center;
width: 135px;
}
<div class="bg-gray-200 p-4 mt-2 text-black items-center flex grid grid-cols-5 gap-x-4 gap-y-8 sm:grid-cols-5 sm:gap-x-6 lg:grid-cols-6 xl:gap-x-8" style="background-color: rgba(255,255,255,.08);">
<div class="relative h-full flex justify-center items-center">
<span class="absolute top-0 text-xs sm:text-sm font-medium text-black text-center mb-5 "> None </span>
<label class="rounded-full flex flex-col items-center justify-center focus:outline-none ring-pink-500">
<span aria-hidden="true" class="mt-6 cursor-pointer h-24 w-24 border-opacity-10 rounded-full z-9">
<img src="https://selection-app.netlify.app/assets/thumbnails/Rosehip.png" class="rounded-full" alt="">
</span>
<input type="radio" name="botanicals" data-id="botanicals" class="sr-only">
</label>
</div>
<div class="relative h-full flex justify-center items-center">
<span class="absolute top-0 text-xs sm:text-sm font-medium text-black text-center mb-5 "> Rosehip Oil </span>
<label data-id="Rosehip Oil" class="p-0.5 rounded-full flex flex-col items-center justify-center focus:outline-none ring-pink-500">
<svg class="svg absolute rosehip_recommended_svg" viewBox="0 0 100 100" width="100" height="100" style="z-index: -1;" >
<defs>
<path id="circle"
d="
M 50, 50
m -37, 0
a 37,37 0 1,1 74,0
a 37,37 0 1,1 -74,0"/>
</defs>
<text font-size="11" style="transform: rotate(-55deg); transform-origin: center;">
<textPath xlink:href="#circle" class="text-black versailles">
Recommendation based on your skin goals
</textPath>
</text>
</svg>
<span aria-hidden="true" class="oil_label cursor-pointer h-24 w-24 border-opacity-10 rounded-full z-9">
<img src="https://selection-app.netlify.app/assets/thumbnails/Rosehip.png" class="rounded-full" alt="">
</span>
<input type="radio" name="default_oil" data-title="Argan Oil" data-id="default_oil" value="Argan Oil_10" class="sr-only">
</label>
<div class="info_icon oil_info_icon absolute z-9 bottom-0" data-id="Rosehip Oil">
<div class="flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-black -mt-16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
</div>
<span class="absolute text-xs sm:text-sm font-medium text-black bottom-0 mt-2"> Smooth </span>
</div>
<div class="relative h-full flex justify-center items-center">
<span class="absolute top-0 text-xs sm:text-sm font-medium text-black text-center mb-5"> Marula Oil </span>
<label data-id="Marula Oil" class="p-0.5 rounded-full flex flex-col items-center justify-center focus:outline-none ring-pink-500">
<svg class="svg absolute hidden hidden marula_recommended_svg" viewBox="0 0 100 100" width="100" height="100" style="z-index: -1;" >
<defs>
<path id="circle"
d="
M 50, 50
m -37, 0
a 37,37 0 1,1 74,0
a 37,37 0 1,1 -74,0"/>
</defs>
<text font-size="11" style="transform: rotate(-55deg); transform-origin: center;">
<textPath xlink:href="#circle" class="text-black versailles">
Recommendation based on your skin goals
</textPath>
</text>
</svg>
<span aria-hidden="true" class="oil_label cursor-pointer h-24 w-24 border-opacity-10 rounded-full z-9">
<img src="https://selection-app.netlify.app/assets/thumbnails/Rosehip.png" class="rounded-full">
</span>
<input type="radio" name="default_oil" data-title="Marula Oil" data-id="default_oil" value="Marula Oil_10" class="sr-only">
</label>
<div class="info_icon oil_info_icon absolute z-9 bottom-0" data-id="Marula Oil">
<div class="flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-black -mt-16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
</div>
<span class="absolute text-xs sm:text-sm font-medium text-black bottom-0"> Smooth </span>
</div>
<div class="relative h-full flex justify-center items-center">
<span class="absolute top-0 text-xs sm:text-sm font-medium text-black text-center mb-5"> Argan Oil </span>
<label data-id="Argan Oil" class="p-0.5 rounded-full flex flex-col items-center justify-center focus:outline-none ring-pink-500">
<svg class="svg absolute hidden argan_recommended_svg" viewBox="0 0 100 100" width="100" height="100" style="z-index: -1;" >
<defs>
<path id="circle"
d="
M 50, 50
m -37, 0
a 37,37 0 1,1 74,0
a 37,37 0 1,1 -74,0"/>
</defs>
<text font-size="11" style="transform: rotate(-55deg); transform-origin: center;">
<textPath xlink:href="#circle" class="text-black versailles">
Recommendation based on your skin goals
</textPath>
</text>
</svg>
<span aria-hidden="true" class="oil_label cursor-pointer h-24 w-24 border-opacity-10 rounded-full z-9">
<img src="https://selection-app.netlify.app/assets/thumbnails/Rosehip.png" class="rounded-full">
</span>
<input type="radio" name="default_oil" data-title="Argan Oil" data-id="default_oil" value="Argan Oil_10" class="sr-only">
<div class="oil_label_checked_icon absolute inset-x-0 top-0 transform translate-y-px hidden">
<div class="flex justify-center transform -translate-y-1/2">
<svg class=" h-6 w-6 text-green-600 ml-10 mt-20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
</div>
</div>
</label>
<div class="info_icon oil_info_icon absolute z-9 bottom-0" data-id="Argan Oil">
<div class="flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-black -mt-16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
</div>
<span class="absolute text-xs sm:text-sm font-medium text-black bottom-0 mt-2"> Smooth </span>
</div>
<div class="relative h-full flex justify-center items-center">
<span class="absolute top-0 text-xs sm:text-sm font-medium text-black text-center mb-5"> Jajoba Oil </span>
<label data-id="Jajoba Oil" class="p-0.5 rounded-full flex flex-col items-center justify-center focus:outline-none ring-pink-500">
<svg class="svg absolute Jajoba_recommended_svg" viewBox="0 0 100 100" width="100" height="100" style="z-index: -1;" >
<defs>
<path id="circle"
d="
M 50, 50
m -37, 0
a 37,37 0 1,1 74,0
a 37,37 0 1,1 -74,0"/>
</defs>
<text font-size="11" style="transform: rotate(-55deg); transform-origin: center;">
<textPath xlink:href="#circle" class="text-black versailles">
Recommendation based on your skin goals
</textPath>
</text>
</svg>
<span aria-hidden="true" class="oil_label cursor-pointer h-24 w-24 border-opacity-10 rounded-full z-9">
<img src="https://selection-app.netlify.app/assets/thumbnails/Rosehip.png" class="rounded-full">
</span>
<input type="radio" name="default_oil" data-title="Jajoba Oil" data-id="default_oil" value="Jajoba Oil_10" class="sr-only">
<div class="oil_label_checked_icon absolute inset-x-0 top-0 transform translate-y-px hidden">
<div class="flex justify-center transform -translate-y-1/2">
<svg class=" h-6 w-6 text-green-600 ml-10 mt-20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
</div>
</div>
</label>
<div class="info_icon oil_info_icon absolute z-9 bottom-0" data-id="Jajoba Oil">
<div class="flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-black -mt-16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
</div>
<span class="absolute text-xs sm:text-sm font-medium text-black bottom-0 mt-2"> Smooth </span>
</div>
<div class="relative h-full flex justify-center items-center">
<span class="absolute top-0 text-xs sm:text-sm font-medium text-black text-center mb-5"> Almond Oil </span>
<label data-id="Almond Oil" class="p-0.5 rounded-full flex flex-col items-center justify-center focus:outline-none ring-pink-500">
<svg class="svg absolute Almond_recommended_svg" viewBox="0 0 100 100" width="100" height="100" style="z-index: -1;" >
<defs>
<path id="circle"
d="
M 50, 50
m -37, 0
a 37,37 0 1,1 74,0
a 37,37 0 1,1 -74,0"/>
</defs>
<text font-size="11" style=" transform: rotate(-55deg); transform-origin: center;">
<textPath xlink:href="#circle" class="text-black versailles ">
Recommendation based on your skin goals
</textPath>
</text>
</svg>
<span aria-hidden="true" class="mt-16 oil_label cursor-pointer h-24 w-24 border-opacity-10 rounded-full z-9">
<img src="https://selection-app.netlify.app/assets/thumbnails/Rosehip.png" class="rounded-full">
</span>
<input type="radio" name="default_oil" data-title="Almond Oil" data-id="default_oil" value="Almond Oil_10" class="sr-only">
<div class="info_icon oil_info_icon z-9" data-id="Almond Oil">
<div class="flex justify-center transform -translate-y-4 ">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-black mt-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
</div>
<span class=" text-xs sm:text-sm font-medium text-black bottom-0 mt-2"> Smooth </span>
</label>
</div>
</div>
Change your code to this. Then let me know.
#media (max-width: 639px) {
.sm\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
<div class="bg-gray-200 p-4 mt-2 text-black items-center grid grid-cols-6 gap-x-4 gap-y-8 sm:grid-cols-6 sm:gap-x-6 lg:grid-cols-6 xl:gap-x-8" style="background-color: rgba(255,255,255,.08);">
I'm pretty new to clip paths with css, but what im trying to do it make a clip path separator for 2 background colors. I tried to look up if someone already did something similar but i didn't find it. I'm using Tailwindcss and just regulair CSS with HTML
This is how far I got so far :
Codepen
Code:
<div class="max-w-5xl mx-auto px-2 sm:px-6 lg:px-8 w-full ">
<div class="grid grid-cols-1 md:grid-cols-3 ">
<div class="py-12 px-4">
<h3 class="text-2xl text-white font-bold">Lorum ipsum</h3>
<p class="text-white mt-4">Some more lorum ipsum Some more lorum ipsum Some more lorum ipsum Some more lorum ipsum Some more lorum ipsum</p>
</div>
<div class="py-12 px-4 z-10 flex items-center">
<ul class="mx-auto space-y-4 text-white text-xl">
<li class="flex">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Lorum ipsum
</li>
<li class="flex">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Lorum ipsum
</li>
<li class="flex">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Lorum ipsum
</li>
</ul>
</div>
<div class="py-12 px-4 z-10 flex items-center">
<ul class=" mx-auto space-y-4 text-white text-xl">
<li class="flex">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Lorum ipsum
</li>
<li class="flex">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Lorum ipsum
</li>
<li class="flex">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Lorum ipsum
</li>
</ul>
</div>
</div>
</div>
<div class=" hidden md:flex absolute h-full w-3/5 top-0 right-0 bg-yellow-300 " style="clip-path: polygon(0 100%, 100% 100%, 100% 0, 5% 0%); -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0, 5% 0%);"></div>
My problem now is thats its not responsive. You can see the text overlapping once you go down in screen resolution.
Can someone give me a bit of directions on where to go from here? I'm not sure if I'm going the right direction or if my code needs to change completely.
This is the result im trying to achieve
The problem is that the aspect ratio of the whole changes with different viewports/devices so the % measurements needed to maintain the same angle of slope change and would require some calculation (e.g. in JS) to maintain.
One alternative is to use a feature in CSS where it will maintain a slope. That is linear-gradient.
This snippet introduces two new classes. bgSlope paints a background with a slope and bgDual ensures that the yellow color extends right across the parent element, however much the overall width compared to the centered content.
Of course, there will have to be some alteration when the viewport gets so narrow that the second two columns move beneath, otherwise you'll get a funny angle, but I don't know what you want to do anyway with the coloring on a narrow device.
<html>
<head>
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<style>
.bgSlope {
background-image: linear-gradient(-60deg, rgba(252, 211, 77) 62.5%, transparent 62.5% 100%);
}
.bgDual {
background-image: linear-gradient(to right, rgba(209, 213, 219) 0 70%, rgba(252, 211, 77) 70% 100%);
}
</style>
</head>
<body>
<div class="w-full relative bgDual">
<div class="max-w-5xl mx-auto px-2 sm:px-6 lg:px-8 w-full ">
<div class="grid grid-cols-1 md:grid-cols-3 bgSlope">
<div class="py-12 px-4">
<h3 class="text-2xl text-white font-bold">Lorum ipsum</h3>
<p class="text-white mt-4">Some more lorum ipsum Some more lorum ipsum Some more lorum ipsum Some more lorum ipsum Some more lorum ipsum</p>
</div>
<div class="py-12 px-4 z-10 flex items-center">
<ul class="mx-auto space-y-4 text-white text-xl">
<li class="flex">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg> Lorum ipsum
</li>
<li class="flex">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg> Lorum ipsum
</li>
<li class="flex">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg> Lorum ipsum
</li>
</ul>
</div>
<div class="py-12 px-4 z-10 flex items-center">
<ul class=" mx-auto space-y-4 text-white text-xl">
<li class="flex">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg> Lorum ipsum
</li>
<li class="flex">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg> Lorum ipsum
</li>
<li class="flex">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg> Lorum ipsum
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
I have a KPI list styled with a tailwind that uses a Count Up animation. The animation starts with a digit length of 0 and ends at 19348. This difference in space- and digit width leads to the layout being shaked up.
How can I prevent this, or set the Count Up in a „container" (with fixed width?) so that it doesn't shake up the remaining parts of the layout?
This is the component layout:
{/* Your Balance */}
<div className="flex-nowrap">
<h2 className="text-xl">Your Balance</h2>
<div className="flex justify-center items-center">
<h1 className="text-3xl mb-5 md:mb-0 lg:-mb-0 2xl:mb-0 text-white">
<CountUp end={19348} />CHF</h1>
<svg width="21px" height="14px" className="ml-5 mx-auto align-items-center">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="02_B_Home_Light" transform="translate(-266.000000, -253.000000)" fill="#00C092">
<polygon id="Triangle" points="276.5 253 287 267 266 267"></polygon>
</g>
</g>
</svg>
</div>
</div>
{/* Weeks Returns */}
<div className="flex-nowrap">
<h2 className="text-xl">Week's returns</h2>
<div className="flex justify-center items-center">
<h1 className="text-3xl mb-5 md:mb-0 lg:-mb-0 2xl:mb-0 text-white">+ 5.78%</h1>
<svg width="21px" height="14px" viewBox="0 0 21 14" className="ml-5 mx-auto align-items-center">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="02_A_Home" transform="translate(-589.000000, -253.000000)" fill="#FE3169">
<polygon id="Triangle"
transform="translate(599.500000, 260.000000) rotate(-180.000000) translate(-599.500000, -260.000000) "
points="599.5 253 610 267 589 267"></polygon>
</g>
</g>
</svg>
</div>
</div>
{/* Month' Returns */}
<div className="flex-nowrap">
<h2 className="text-xl">Month return</h2>
<div className="flex justify-center items-center">
<h1 className="text-3xl mb-5 md:mb-0 lg:-mb-0 2xl:mb-0 text-white">+ 2.21%</h1>
<svg width="21px" height="14px" className="ml-5 mx-auto align-items-center">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="02_B_Home_Light" transform="translate(-266.000000, -253.000000)" fill="#00C092">
<polygon id="Triangle" points="276.5 253 287 267 266 267"></polygon>
</g>
</g>
</svg>
</div>
</div>
{/* YTD Return */}
<div className="flex-nowrap">
<h2 className="text-xl">Year to date return</h2>
<div className="flex justify-center items-center">
<h1 className="text-3xl mb-5 md:mb-0 lg:-mb-0 2xl:mb-0 text-white">+ 2.21%</h1>
<svg width="21px" height="14px" className="mx-auto ml-5 align-items-center">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="02_B_Home_Light" transform="translate(-266.000000, -253.000000)" fill="#00C092">
<polygon id="Triangle" points="276.5 253 287 267 266 267"></polygon>
</g>
</g>
</svg>
</div>
</div>
This happens because justify-between set a width "auto", you only have to set a width to each child box, for example w-1/4, you have 4 boxes so...
<div class="flex flex-row justify-between bg-black">
<div class="flex-nowrap w-1/4">
<div class="flex justify-center items-center">
<h1 class="text-3xl mb-5 md:mb-0 lg:-mb-0 2xl:mb-0 text-white">
<span class="change-me">1</span> CHF</h1>
</div>
</div>
<div class="flex-nowrap w-1/4">
<div class="flex justify-center items-center">
<h1 class="text-3xl mb-5 md:mb-0 lg:-mb-0 2xl:mb-0 text-white">+ 5.78%</h1>
</div>
</div>
<div class="flex-nowrap w-1/4">
<div class="flex justify-center items-center">
<h1 class="text-3xl mb-5 md:mb-0 lg:-mb-0 2xl:mb-0 text-white">+ 2.21%</h1>
</div>
</div>
<div class="flex-nowrap w-1/4">
<div class="flex justify-center items-center">
<h1 class="text-3xl mb-5 md:mb-0 lg:-mb-0 2xl:mb-0 text-white">+ 2.21%</h1>
</div>
</div>
</div>