VibeCoderzVibeCoderz
Telegram
All Prompts
Award Recognition Section with Responsive Grid preview
sectionawardslisttailwindresponsivegridaboutcredibility

Award Recognition Section with Responsive Grid

Секция с наградами компании. Адаптивная сетка Tailwind CSS для отображения названий, категорий и лет. Улучшает доверие на лендингах и страницах "о нас".

Prompt

<section class="sm:px-8 max-w-7xl mr-auto ml-auto pr-6 pl-6">
  <div class="py-12 sm:py-16">
    <div class="text-sm text-white/40 font-geist">(Recognition)</div>

    <h2 class="mt-4 text-5xl sm:text-7xl lg:text-8xl leading-none text-white tracking-tight font-geist font-medium" style="">AWARD WINNING</h2>
    <h2 class="text-5xl sm:text-7xl lg:text-8xl leading-none text-white tracking-tight font-geist font-medium" style="">EXCELLENCE</h2>

    <div class="mt-6 flex items-center gap-3 text-white/30">
      <span class="text-base font-geist">+</span>
      <div class="h-px flex-1 bg-white/10"></div>
      <span class="text-base font-geist">+</span>
    </div>

    <div class="mt-8 grid lg:grid-cols-12 gap-8 items-start">
      <div class="hidden lg:block lg:col-span-5"></div>
      <div class="lg:col-span-7">
        <p class="text-xl sm:text-2xl text-white/70 tracking-tight font-geist font-medium" style="">Our commitment to professional photography excellence has been recognized by leading industry organizations and publications worldwide.</p>

        <div class="mt-8 border-t border-white/10 divide-y divide-white/10">
          <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 py-4">
            <div class="text-base text-white/80 font-geist">Camera Retailer Awards</div>
            <div class="text-base text-white/80 font-geist">Best Online Camera Store</div>
            <div class="text-base text-white/60 text-right font-geist">(2024)</div>
          </div>
          <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 py-4">
            <div class="text-base text-white/80 font-geist">Professional Photo Magazine</div>
            <div class="text-base text-white/80 font-geist">Dealer of the Year</div>
            <div class="text-base text-white/60 text-right font-geist">(2024)</div>
          </div>
          <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 py-4">
            <div class="text-base text-white/80 font-geist">Industry Excellence Awards</div>
            <div class="text-base text-white/80 font-geist">Customer Service Excellence</div>
            <div class="text-base text-white/60 text-right font-geist">(2024)</div>
          </div>
          <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 py-4">
            <div class="text-base text-white/80 font-geist">Digital Photography Review</div>
            <div class="text-base text-white/80 font-geist">Trusted Gear Partner</div>
            <div class="text-base text-white/60 text-right font-geist">(2024)</div>
          </div>
          <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 py-4">
            <div class="text-base text-white/80 font-geist">Imaging Trade Association</div>
            <div class="text-base text-white/80 font-geist">Innovation in Retail</div>
            <div class="text-base text-white/60 text-right font-geist">(2023)</div>
          </div>
          <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 py-4">
            <div class="text-base text-white/80 font-geist">Photo Industry Awards</div>
            <div class="text-base text-white/80 font-geist">Best Equipment Selection</div>
            <div class="text-base text-white/60 text-right font-geist">(2023)</div>
          </div>
          <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 py-4">
            <div class="text-base text-white/80 font-geist">Retail Excellence Awards</div>
            <div class="text-base text-white/80 font-geist">Outstanding User Experience</div>
            <div class="text-base text-white/60 text-right font-geist">(2023)</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
All Prompts