Tailwind

<div class="text-center my-4">
    <p class="text-white md:text-green-500 sm:text-red-600">
    Lorem ipsum, dolor.
    </p>
</div>
<div class="mt-3">
    <div class="max-w-sm mx-auto bg-white rounded-xl overflow-hidden md:max-w-2xl">
    <div class="md:flex">
        <div>
        <img
            class="h-48 w-full object-cover md:h-full md:w-48"
            src="https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80"
        />
        </div>
        <div class="p-4">
        <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">
            An awesome card
        </div>
        <a
            href="#"
            class="block mt-1 text-lg font-medium text-black hover:text-blue-700"
        >
            Tailwind CSS is amazing once you undertand the{' '}
            <span class="bg-yellow-500 p-[1px] px-[8px]">power</span>{' '}
            of it
        </a>
        <p class="mt-2 text-slate-500">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </p>
        </div>
    </div>
    </div>
</div>