InfoWindow Mapy rzemieślników Desktop

This tailwind example is contributed by Antoni Wierzba, on 23-May-2026. Component is made with Tailwind v3.4. It is responsive.

Other

Author Antoni Wierzba

Tailwind v3.4 144

Fork Fullscreen

<article class="absolute top-0 left-0 z-30 h-full w-full bg-white/90 shadow-2xl md:top-0 md:left-0 md:h-full md:w-[34%]">
        <div class="grid h-full w-full grid-cols-[34%_66%] md:flex md:flex-col">
          
          <div class="relative h-full w-full bg-red-200 md:h-1/2 md:w-full">
            Media / zdjęcie

<div class="absolute bottom-4 left-1/2 z-20 flex h-8 w-8 -translate-x-1/2 items-center justify-center rounded-full bg-white shadow-xl ring-4 ring-white sm:h-14 sm:w-14 md:top-6 md:bottom-auto md:left-6 md:h-10 md:w-10 md:translate-x-0 lg:h-12 lg:w-12 xl:h-14 xl:w-14">
              <div class="flex h-full w-full items-center justify-center rounded-full bg-red-900 text-center text-[clamp(6px,0.7vw,9px)] leading-tight font-bold text-yellow-400 uppercase">Logo</div>
            </div>

</div>

<div class="relative h-full w-full bg-white p-2 sm:p-3 md:h-1/2 md:w-full md:p-6">
          <div class="flex h-full flex-col">
            <p class="mb-0.5 text-[6px] uppercase tracking-[0.14em] text-stone-500 sm:text-[8px] md:mb-1 md:text-[10px]">
              Pracownia
            </p>

<h4 class="text-[11px] leading-tight text-black sm:text-xl md:text-base lg:text-2xl xl:text-[28px]">
              Piece Kominki Zduństwo Artystyczne sp. z o.o
            </h4>

<div class="mt-1 flex items-start gap-1 sm:mt-1.5 sm:gap-1.5 md:mt-4 md:gap-2">
              <span class="text-[9px] leading-none sm:text-[11px] md:text-base">⌖</span>
              <p class="text-[7px] leading-tight text-stone-800 sm:text-lg md:text-xs lg:text-sm">
                al. Marszałka Józefa Piłsudskiego 135<br />
                92-318 Łódź
              </p>
            </div>

<div class="mt-auto pt-1 sm:pt-2 md:pt-3">
              <button class="bg-neutral-300 px-3 py-0.5 text-[8px] text-black shadow ring-1 ring-neutral-400 sm:px-4 sm:text-[10px] md:px-6 md:py-1 md:text-sm">
                Profil
              </button>
            </div>
          </div>
        </div>

</div>
      </article>

</div>
  </section>
</div>

Related Examples

Chatbox template

Lucas Martinez

3 years ago

13.2k
Flex and Flex-Col
วิธีการใช้ Flex และ Flex-Col

rawitsara.tr

1 year ago

1.3k
Skill showcase section for resume / porfolio website
show skill progression

Ava Brown

3 years ago

14.6k
Text Overlay Effect
This is a text overlay effect, featuring a subtle background title and a prominent foreground heading. This design enhances visual interest while maintaining a clean, modern aesthetic.

Anum Shahana

1 year ago

2.3k
Websites built to perform beautifully.
We design high-impact websites that convert and scale. From sleek interfaces to full stack experiences, we bring your brand to life online.

Alif Bima Pradana

7 months ago

582
Sticky fullpage pages / slides

Laurits

3 years ago

16.6k
record

Anonymous

5 days ago

8
lachisa
Lachisa is a modern and innovative solution designed to simplify everyday experiences through smart technology, seamless performance, and user-friendly design. It empowers users with efficiency, reliability, and a future-ready approach.

Lokesh H

3 months ago

333
Forgot Password Screen

JUGENDRA GANGWAR

4 days ago

12
htmlcss1

Anonymous

1 year ago

889
InGen

Dennis Kamp

6 months ago

436
Hacker terminal #fake
hacker terminal tailwind css

QQ-VVN

1 year ago

1.8k