A simpler responsive event card using React and TailwindCSS

Events.js

const Events = () => {
	return (
		<div className="m-8 flex flex-col justify-center md:flex-row md:space-x-4 md:items-center">
			<div className="size-32 md:size-28 border-blue-700 border-2 border-dashed text-white bg-blue-400 flex justify-center items-center flex-col">
				<p className="font-bold text-4xl">06</p>
				<p className="font-bold text-xl">MAY</p>
				<p className="font-bold text-lg">2024</p>
			</div>
			<div className="md:w-6/12">
				<div className="mb-2 flex flex-col justify-start items-start">
					<h2 className="text-white font-bold text-lg pt-2 md:pt-0">
						Global Placement Staragies
					</h2>
					<p className="text-white text-sm">Chennai</p>
				</div>
				<div className="h-16 overflow-hidden">
					<p className="text-white text-sm font-semibold">
						{" "}
						Lorem Ipsum is simply dummy text of the printing and typesetting
						industry. Lorem Ipsum has been the industry's standard dummy text
						ever since the 1500s, when an unknown printer took a galley of type
						and scrambled it to make a type specimen book. It has survived not
						only five centuries,{" "}
					</p>
				</div>
			</div>
			<div className="mt-4">
				<div className="text-orange-300 p-2 border-orange-300 border-2 max-w-32 flex space-x-2 justify-center items-center">
					<p className="text-sm font-semibold">Learn More</p>
					<div className="size-3">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
							<path
								fill="#FFA500"
								d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"
							/>
						</svg>
					</div>
				</div>
			</div>
		</div>
	);
};

export default Events;