Docs TailwindCSS

<div class="bg-white rounded-2xl shadow-lg p-6 hover:-translate-y-2 hover:shadow-xl transition-all duration-300">
    <div class="w-14 h-14 bg-yellow-100 rounded-xl flex items-center justify-center mb-4">
        <i class="fa-solid fa-ship text-yellow-600 text-2xl"></i>
    </div>

    <h3 class="text-xl font-semibold text-slate-800 mb-2">
        Crew Management
    </h3>

    <p class="text-slate-500 mb-4">
        Professional crew recruitment and management services for international shipping companies.
    </p>

    <a href="#" class="text-yellow-500 font-medium hover:text-yellow-600">
        Learn More →
    </a>
</div>

<div class="max-w-md overflow-hidden rounded-2xl shadow-xl group">
    <div class="relative h-64">
        <img
            src="https://4kwallpapers.com/images/walls/thumbs_2t/24494.jpg"
            class="w-full h-full object-cover group-hover:scale-110 transition duration-500"
        >

        <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent"></div>

        <div class="absolute bottom-0 p-6">
            <span class="bg-yellow-400 text-slate-900 px-3 py-1 rounded-full text-xs font-bold">
                VACANCY
            </span>

            <h3 class="text-white text-2xl font-bold mt-3">
                Chief Officer
            </h3>

            <p class="text-gray-200 mt-2">
                Join our tanker fleet with competitive salary package.
            </p>
        </div>
    </div>
</div>