如何使用parwindcss构建响应迅速的朋友请求组件
#html #网络开发人员 #tailwindcss #webdesign

This design was inspired from one [icodethis](https://icodethis.com) UI challenge

社交媒体是通过虚拟社区和网络来促进信息，思想，兴趣和其他表达形式的互动技术。

社交媒体提供的惊人功能之一是能够与人建立联系，有时甚至将来的同事建立新朋友。这是通过朋友请求。

一起，我们将建立一个很棒的朋友请求组件，您可以将其包括在下一个项目中，或者您可能会构建的下一个最大的社交媒体。

让我们开始！

Demo of the Friend Request

了解任务

这实际上比您想象的要容易。我们的组件具有一个主要部分，该部分被多次复制。您可以将其视为具有模板朋友请求，其中按照执行请求的人添加数据。

Part of a friend request

代码结构

我们可以按因此构建代码

<body>

 <div>
  <div>
        <!-- Friend Request sub-component-->
          <div class="friendRequest"></div>
                .
                .
                .     
  </div>
 </div>

</body>

正如我们所看到的，它只是一个子组件，多次重复。让我们在这个子组件上工作。

朋友请求子组件 

 <div>
    <div>
            <!-- Profile Image -->
        <div><img src="/public/assets/Dec 13, 2022/Bradon.jpg" alt=""></div>

        <div>
              <!-- Person Name -->
            <h2>Mbianou Bradon</h2>
              <!-- Number of Mutual Friends -->
            <p>7 mutual friends</p>
        </div>

    </div>
            <!-- Confirm Button-->
    <div class="bg-white hover:text-white hover:bg-[#ff7575] cursor-pointer transition-all ease-linear duration-300">
        <h2>Confirm</h2>
    </div>
</div>

我相信我们可以清楚地看到我们朋友请求子组件的不同组成部分。使用基本样式（ 现在都不是真正可见的，因为从父组件中应用了一般样式。但是，不打扰，这将在几行下降中是有意义的）。

现在！让我们添加一些额外的请求sub组件，然后将它们包装在一个父容器中

 <div class="px-6 py-16 rounded-md shadow-md shadow-[#ff7575] relative overflow-hidden">

          <!-- Friend Request Header -->
  <div class="flex justify-between items-center">
      <h2 class="text-xl font-semibold">Friend Requests</h2>
      <p class="text-slate-500 cursor-pointer hover:text-white hover:underline transition-all ease-linear duration-200">View All</p>
  </div>

            <!-- Parent Container containing all the friend request subcomponent -->
  <div class="[&>*div>div>h2]:rounded-sm [&>*div>div>h2]:shadow-md [&>*div>div>h2]:px-6 [&>*div>div>h2]:py-2 [&>*>div>div>img]:rounded-full 
    [&>*>div>div>img]:aspect-square [&>*>div>div>img]:object-cover [&>*>div>div>img]:object-center [&>*>div>div>img]:h-14 [&>*>div>div>img:hover]:scale-125 
    [&>*>div>div>img:hover]:transition-all [&>*>div>div>img:hover]:ease-linear [&>*>div>div>img:hover]:duration-300 [&>*>div>div>img] [&>*div>div>div>h2]:text-lg [&>*div>div>div>h2]:font-bold [&>*div>div>div>p]:text-slate-600 [&>*>div]:flex [&>*>div]:items-center [&>*>div]:gap-2 [&>*]:flex [&>*]:items-center [&>*]:justify-between [&>*]:my-10">

              <!-- First subcomponent -->
      <div>
          <div>
                      <!-- Profile Image -->
              <div><img src="/public/assets/Dec 13, 2022/Bradon.jpg" alt=""></div>
              <div>
                      <!-- Person Name -->
                  <h2>Mbianou Bradon</h2>
                      <!-- Number of Mutual Friends -->
                  <p>7 mutual friends</p>
              </div>
          </div>
                      <!-- Confirm Button-->
          <div class="bg-white hover:text-white hover:bg-[#ff7575] cursor-pointer transition-all ease-linear duration-300">
              <h2>Confirm</h2>
          </div>
      </div>

                <!-- Second subcomponent -->
      <div>
          <div>
                      <!-- Profile Image -->
              <div><img src="/public/assets/Dec 13, 2022/marienzale.jpeg" alt=""></div>

              <div>
                      <!-- Person Name -->
                  <h2>Marie Nzale</h2>
                      <!-- Number of Mutual Friends -->
                  <p>3 mutual friends</p>
              </div>
          </div>
                      <!-- Confirm Button-->
          <div class="bg-white hover:text-white hover:bg-[#ff7575] cursor-pointer transition-all ease-linear duration-300">
              <h2>Confirm</h2>
          </div>
      </div>

                  <!-- Third subcomponent -->
      <div>
          <div>
                      <!-- Profile Image -->
              <div><img src="/public/assets/Dec 13, 2022/lovette.jpeg" alt=""></div>

              <div>
                      <!-- Person Name -->
                  <h2>Kimboh Lovette</h2>
                      <!-- Number of Mutual Friends -->
                  <p>8 mutual friends</p>
              </div>
          </div>
                      <!-- Confirm Button-->
          <div class="bg-white hover:text-white hover:bg-[#ff7575] cursor-pointer transition-all ease-linear duration-300">
              <h2>Confirm</h2>
          </div>
      </div>

  </div>

之后，您的工作应该看起来很像这个

Plan Friend request componet

看起来一点也不糟糕，但对我来说太朴素了。让我们在圆圈之前添加它们。 ðübr> 

<body class="bg-[#f8f5f5] flex items-center justify-center min-h-screen">

<div class="bg-white w-[23rem] sm:w-[30rem] relative overflow-hidden shadow-md shadow-[#ff7575]">

[NEW]        <!-- Upper circle-->
   <div class="w-[24rem] px-72 py-64 bg-gradient-to-r from-[#ff7575] to-[#ff9a50] rounded-[10rem] absolute -right-96 -top-56 rotate-[16deg]"></div>

    <div class="px-6 py-16 rounded-md shadow-md shadow-[#ff7575] relative overflow-hidden">

             <!-- Friend Request Header-->
             <div></div>

              <!-- Parent Container containing all the friend request subcomponent-->
             <div></div>
    </div>

[NEW]        <!-- Lower circle-->
     <div class="bg-[#ff7575] w-[20rem] p-52 rounded-full absolute -left-32"></div>
</div>


</body>

我们只是在组件中添加了两个圆圈，然后将它们绝对放置，然后将它们放置在使用左右属性的位置

您可以通过在上述代码中查看[新]来轻松识别此组件。

这几乎就是这样。 ð

我们刚刚设计了一个反应迅速的朋友请求组件！

结论

我们刚刚构建了一个简单而响应的朋友请求组件，而无需打开我们的CSSfileð。感谢parwindcss。

许多雇主将需要将这样的组件添加到他们的网站上，现在您应该为自己是少数知道如何在不到5分钟内建造它的人而感到自豪，您甚至可以在不离开HTML的情况下做到这一点文档ð。

您可以在Codepen上进行实时预览，也可以在Github

上找到代码

不要与我分享如果您能够完成本教程，我很高兴看到您添加了您在购物车中添加的任何添加样式。

如果您有任何担忧或建议，请不要犹豫将其留在评论部分！ ð

见ya！ ð