Adjust text size, margins and paddings

challenges/chat_app_css_illustration/index.html

@@ -49,7 +49,7 @@
  class="absolute flex flex-col items-center justify-center lg:flex-row"
  >
  <div
- class="drop-shadow-light-violet w-[320px] rounded-3xl bg-white p-2 drop-shadow-2xl"
+ class="drop-shadow-light-violet w-[250px] rounded-3xl bg-white p-2 drop-shadow-2xl"
  >
  <div
  class="bg-light-grayish-violet drop-shadow-pale-violet flex w-full flex-col justify-center rounded-2xl"
@@ -63,16 +63,16 @@
  </div>
  <!-- phone's header -->
  <div
- class="from-light-violet to-light-magenta flex w-full items-center rounded-t-3xl bg-gradient-to-r py-3"
+ class="from-light-violet to-light-magenta flex w-full items-center rounded-t-3xl bg-gradient-to-r py-2"
  >
- <div class="mt-2 flex w-full items-center pl-2">
+ <div class="mt-3 flex w-full items-center pl-2">
  <svg
  xmlns="http://www.w3.org/2000/svg"
  fill="none"
  viewBox="0 0 24 24"
  stroke-width="1.5"
  stroke="currentColor"
- class="h-6 w-6 text-white"
+ class="h-4 w-4 font-extrabold text-white"
  >
  <path
  stroke-linecap="round"
@@ -86,7 +86,7 @@
  viewBox="0 0 24 24"
  stroke-width="1.5"
  stroke="currentColor"
- class="relative -right-12 order-last h-6 w-6 text-white"
+ class="relative -right-12 order-last h-4 w-4 text-white"
  >
  <path
  stroke-linecap="round"
@@ -97,21 +97,27 @@
  <img
  src="images/avatar.jpg"
  alt="Samuel Green's Avatar"
- class="mx-1 h-10 w-10 rounded-full border-2"
+ class="mx-1 h-8 w-8 rounded-full border-2"
  />
  <div class="py-2">
- <h2 class="text-sm font-medium text-white">Samuel Green</h2>
- <span class="text-pale-violet text-xs"
+ <h2 class="text-xs font-extrabold text-white">
+ Samuel Green
+ </h2>
+ <span class="text-pale-violet text-[0.5rem]"
  >Available to Walk</span
  >
  </div>
  </div>
  </div>
- <div class="text-moderate-violet p-2 text-xs font-thin">
- <p class="w-44 rounded-lg rounded-bl-sm bg-gray-200 p-2">
+ <div class="text-moderate-violet p-2 text-xs font-extralight">
+ <p
+ class="w-32 rounded-lg rounded-bl-sm bg-gray-200 p-2 text-[0.5rem]"
+ >
  That sounds great. I’d be happy with that.
  </p>
- <p class="mt-2 w-44 rounded-lg rounded-bl-sm bg-gray-200 p-2">
+ <p
+ class="mt-2 w-32 rounded-lg rounded-bl-sm bg-gray-200 p-2 text-[0.5rem]"
+ >
  Could you send over some pictures of your dog, please?
  </p>
  </div>
@@ -133,66 +139,68 @@ <h2 class="text-sm font-medium text-white">Samuel Green</h2>
  />
  </div>
  <div
- class="text-very-dark-desaturated-violet flex flex-col items-end px-2 pb-2 text-xs font-thin"
+ class="text-very-dark-desaturated-violet flex flex-col items-end px-2 pb-2 text-xs font-extralight"
  >
- <p class="mt-2 w-7/12 rounded-lg rounded-br-sm bg-gray-50 p-1">
+ <p
+ class="mt-2 w-36 rounded-lg rounded-br-sm bg-gray-50 p-1 text-[0.5rem]"
+ >
  Here are a few pictures. She’s a happy girl!
  </p>
  <p
- class="mt-2 w-32 rounded-lg rounded-br-sm bg-gray-50 px-1 py-2"
+ class="mt-2 w-24 rounded-lg rounded-br-sm bg-gray-50 px-1 py-2 text-[0.5rem]"
  >
  Can you make it?
  </p>
  </div>
  <div class="px-2 py-2 text-xs font-extralight">
  <p
- class="text-moderate-violet w-44 rounded-lg rounded-bl-sm bg-gray-200 p-1"
+ class="text-moderate-violet w-32 rounded-lg rounded-bl-sm bg-gray-200 p-1 text-[0.5rem]"
  >
  She looks so happy! The time we discussed works. How long shall
  I take her out for?
  </p>
 
  <div
- class="from-light-magenta to-light-violet my-1.5 mt-2 flex w-48 justify-between rounded-lg rounded-bl-sm bg-gradient-to-r p-2"
+ class="from-light-magenta to-light-violet my-1.5 mt-2 flex w-40 justify-between rounded-lg rounded-bl-sm bg-gradient-to-r p-2"
  >
  <div class="flex items-center gap-3">
  <div
  class="border-very-light-magenta h-4 w-4 rounded-full border-2"
  ></div>
- <p class="text-[0.6rem] text-white">30 minute walk</p>
+ <p class="text-[0.4rem] text-white">30 minute walk</p>
  </div>
  <div>
- <h4 class="px-4 text-sm font-bold text-white">$29</h4>
+ <h4 class="px-2 text-sm font-extrabold text-white">$29</h4>
  </div>
  </div>
 
  <div
- class="from-light-magenta to-light-violet my-1.5 mt-2 flex w-48 justify-between rounded-lg rounded-bl-sm bg-gradient-to-r p-2"
+ class="from-light-magenta to-light-violet my-1.5 mt-2 flex w-40 justify-between rounded-lg rounded-bl-sm bg-gradient-to-r p-2"
  >
  <div class="flex items-center gap-3">
  <div
  class="border-very-light-magenta h-4 w-4 rounded-full border-2"
  ></div>
- <p class="text-[0.6rem] text-white">1 hour walk</p>
+ <p class="text-[0.4rem] text-white">1 hour walk</p>
  </div>
  <div>
- <h4 class="px-4 text-sm font-bold text-white">$49</h4>
+ <h4 class="px-2 text-sm font-extrabold text-white">$49</h4>
  </div>
  </div>
  </div>
  <div class="text-grayish-blue relative px-2 py-3">
  <input
  type="text"
  placeholder="Type a message…"
- class="w-full rounded-full p-2"
+ class="w-full rounded-full p-2 text-[0.6rem]"
  />
  <svg
  xmlns="http://www.w3.org/2000/svg"
  fill="none"
  viewBox="0 0 24 24"
  stroke-width="1.5"
  stroke="currentColor"
- class="bg-desat-dark-violet absolute bottom-5 right-6 h-6 w-6 rounded-full"
+ class="bg-desat-dark-violet absolute bottom-4 right-4 h-6 w-6 rounded-full"
  >
  <path
  stroke-linecap="round"
@@ -204,7 +212,7 @@ <h4 class="px-4 text-sm font-bold text-white">$49</h4>
  </div>
  </div>
  <div
- class="mt-12 flex flex-col px-10 py-2 pb-12 text-center lg:w-[570px] lg:px-20 lg:text-left"
+ class="mt-12 flex flex-col px-6 py-2 pb-12 text-center lg:w-[570px] lg:px-20 lg:text-left"
  >
  <h1 class="text-very-dark-desaturated-violet py-2 text-4xl font-bold">
  Simple booking