[Vuejs]-Vue js Tailwind card design with image out of the card

by

3👍

✅

You have to set the position of your image in relative and subtract the margin bottom from half the height of your div container.
Center the whole thing with flexes (using your code, I added in your second div items-center to do this)

<template>
  <div class="py-20">
    <div class="flex flex-col items-center">
      <!-- Image emplacement -->
      <div class="bg-white h-32 w-32 rounded-full relative -mb-16">
        <button class="z-50">
          <img src="../assets/person.svg" alt="" />
        </button>
      </div>
      <!-- Content Card emplacement -->
      <div class="shadow-2xl rounded-xl w-96 h-96 pb-8 px-8 relative pt-24">
        <div>
          <p class="text-center bt-smalltitle font-bold pb-4">Name Surname</p>

          <div class="flex items-center justify-center pb-4">
            <button
              class="bg-black rounded-2xl text-center text-white bt-book px-2 py-1.5"
            >
              40$ Per session
            </button>
          </div>

          <div class="flex flex-row items-stretch justify-between pb-5">
            <p>Example</p>

            <p>Example</p>
          </div>

          <p class="text-center bt-smalltext">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum placeat
            aperiam tempora.
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
👤fchancel

Leave a comment