Advertisements
So i have component in react to be styled as this pic below and have to be responsive:
but when i implemented the code using tailwind and react instead of looking like the pic below, it becomes like this:
iam using flex justify-between to create it, and here is my try:
const CardCalculation = () => {
return (
<div className="flex justify-betwween">
<div className="w-[120px] h-[100px] m-2 absolute bg-[#d9d9d9]">
<p className="absolute text-2xl text-left text-[#e44]">N RCO 250gr</p>
<p className="absolute text-xl text-left text-[#b4b4b4]">12x5cm</p>
<p className="absolute text-xl text-left text-[#b4b4b4]">Rp. 82.000</p>
</div>
<div className="flex flex-col justify-center items-center absolute gap-2.5 px-[84px] py-3 rounded-md border border-[#f7d716]">
<div className="flex justify-start items-center flex-grow-0 flex-shrink-0 w-[104px] relative gap-4">
<svg
width={12}
height={12}
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="flex-grow-0 flex-shrink-0 w-6 h-6"
preserveAspectRatio="xMidYMid meet"
>
<rect
x={1}
y={1}
width={22}
height={22}
rx={11}
stroke="#F7D716"
stroke-width={2}
/>
<g clip-path="url(#clip0_83_406)">
<rect
width="12.6316"
height="12.6316"
transform="translate(5.68457 5.6842)"
fill="#F7D716"
/>
<path
d="M18.0226 7.74877C17.6318 7.35742 16.9972 7.35767 16.6058 7.74877L10.2292 14.1256L7.39513 11.2915C7.00378 10.9002 6.36942 10.9002 5.97808 11.2915C5.58673 11.6829 5.58673 12.3172 5.97808 12.7086L9.52058 16.2511C9.71612 16.4466 9.97254 16.5446 10.229 16.5446C10.4854 16.5446 10.7421 16.4469 10.9376 16.2511L18.0226 9.16579C18.414 8.77472 18.414 8.14009 18.0226 7.74877Z"
fill="white"
/>
</g>
<defs>
<clippath id="clip0_83_406">
<rect
width="12.6316"
height="12.6316"
fill="white"
transform="translate(5.68457 5.6842)"
/>
</clippath>
</defs>
</svg>
<p className="flex-grow-0 flex-shrink-0 text-lg text-left text-[#f7d716]">
Edit
</p>
</div>
</div>
<div className="flex flex-col justify-center items-center absolute mt-20 gap-2.5 px-[84px] py-3 rounded-md border border-[#e44]">
<div className="flex justify-start items-center flex-grow-0 flex-shrink-0 w-[104px] relative gap-4">
<svg
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="flex-grow-0 flex-shrink-0 w-6 h-6"
preserveAspectRatio="xMidYMid meet"
>
<rect
x={1}
y={1}
width={22}
height={22}
rx={11}
stroke="#EE4444"
stroke-width={2}
/>
<g clip-path="url(#clip0_83_388)">
<path
d="M18.0226 7.74877C17.6318 7.35742 16.9972 7.35767 16.6058 7.74877L10.2292 14.1256L7.39513 11.2915C7.00378 10.9002 6.36942 10.9002 5.97808 11.2915C5.58673 11.6829 5.58673 12.3172 5.97808 12.7086L9.52058 16.2511C9.71612 16.4466 9.97254 16.5446 10.229 16.5446C10.4854 16.5446 10.7421 16.4469 10.9376 16.2511L18.0226 9.16579C18.414 8.77472 18.414 8.14009 18.0226 7.74877Z"
fill="#EE4444"
/>
</g>
<defs>
<clippath id="clip0_83_388">
<rect
width="12.6316"
height="12.6316"
fill="white"
transform="translate(5.68457 5.6842)"
/>
</clippath>
</defs>
</svg>
<p className="flex-grow-0 flex-shrink-0 text-lg text-left text-[#e44]">
Copy
</p>
</div>
</div>
</div>
);
};
export default CardCalculation;
can someone pointing out which line i should improve or any help on this…, anyhelp to this will be very thankfulll
>Solution :
The code needed really fine tuning. The major one I see is every div is using absolute which places the elements on stack. Remove those absolute and try the below code.
Try the below code:
<div class="justify-betwween flex flex-row">
<div class="m-2 h-[100px] w-2/12 bg-[#d9d9d9]"></div>
<div class="flex w-8/12 flex-col items-start justify-center gap-2 p-4">
<p class="text-left text-3xl text-[#e44]">N RCO 250gr</p>
<p class="text-left text-2xl text-[#b4b4b4]">12x5cm</p>
<p class="text-left text-2xl text-[#b4b4b4]">Rp. 82.000</p>
</div>
<div class="w-2/12 p-2">
<div class="flex flex-col items-center justify-center gap-2.5 rounded-md border border-[#f7d716] py-3">
<div class="flex items-center justify-start md:gap-4">
<svg width="{24}" height="{24}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 flex-shrink-0 flex-grow-0" preserveAspectRatio="xMidYMid meet">
<rect x="{1}" y="{1}" width="{22}" height="{22}" rx="{11}" stroke="#F7D716" stroke-width="{2}" />
<g clip-path="url(#clip0_83_406)">
<rect width="12.6316" height="12.6316" transform="translate(5.68457 5.6842)" fill="#F7D716" />
<path d="M18.0226 7.74877C17.6318 7.35742 16.9972 7.35767 16.6058 7.74877L10.2292 14.1256L7.39513 11.2915C7.00378 10.9002 6.36942 10.9002 5.97808 11.2915C5.58673 11.6829 5.58673 12.3172 5.97808 12.7086L9.52058 16.2511C9.71612 16.4466 9.97254 16.5446 10.229 16.5446C10.4854 16.5446 10.7421 16.4469 10.9376 16.2511L18.0226 9.16579C18.414 8.77472 18.414 8.14009 18.0226 7.74877Z" fill="white" />
</g>
<defs>
<clippath id="clip0_83_406">
<rect width="12.6316" height="12.6316" fill="white" transform="translate(5.68457 5.6842)" />
</clippath>
</defs>
</svg>
<p class="text-left text-lg text-[#f7d716]">Edit</p>
</div>
</div>
<div class="mt-[20px] flex flex-col items-center justify-center gap-2.5 rounded-md border border-[#e44] py-3">
<div class="flex items-center justify-start md:gap-4">
<svg width="{24}" height="{24}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 flex-shrink-0 flex-grow-0" preserveAspectRatio="xMidYMid meet">
<rect x="{1}" y="{1}" width="{22}" height="{22}" rx="{11}" stroke="#EE4444" stroke-width="{2}" />
<g clip-path="url(#clip0_83_388)">
<path d="M18.0226 7.74877C17.6318 7.35742 16.9972 7.35767 16.6058 7.74877L10.2292 14.1256L7.39513 11.2915C7.00378 10.9002 6.36942 10.9002 5.97808 11.2915C5.58673 11.6829 5.58673 12.3172 5.97808 12.7086L9.52058 16.2511C9.71612 16.4466 9.97254 16.5446 10.229 16.5446C10.4854 16.5446 10.7421 16.4469 10.9376 16.2511L18.0226 9.16579C18.414 8.77472 18.414 8.14009 18.0226 7.74877Z" fill="#EE4444" />
</g>
<defs>
<clippath id="clip0_83_388">
<rect width="12.6316" height="12.6316" fill="white" transform="translate(5.68457 5.6842)" />
</clippath>
</defs>
</svg>
<p class="text-left text-lg text-[#e44]">Copy</p>
</div>
</div>
</div>
</div>
Output in large device:
Output in small device:
