How to build a Sign Up with Third-Parties Component Using TailwindCSS
Tags: webdev, tailwindcss, html
Published: 2023-03-31 21:50:14


![Sign Up with Third Parties Component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oaeluf54qa8f1w0v5zq1.png)

Being part of the digital era, most of our physical businesses or services are now available online. In fact, we usually enjoy some services that are only available online.

To benefit from this service, we are generally required to Sign Up for it. Which is in most cases, creating an account on the site.

By definition, A sign-up form, is ***a web page, popup, or modal where users enter the information required to access that website’s services***.

Some companies have grown and evolved to a point where they are very renounced and known by most if not all. These companies can be used as third-party services to register on other platforms, Such company includes; Google, Facebook, Twitter, GitHub etc.

In this section, we are going to build a Sign In UI component, that can be used for third-party Authentication.


![Demo of Sign Up](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u9z8o4vvodmol6tzp2z3.gif)



## Understanding the Task

We are required to build a Signup component using third parties, we will be using Google, Facebook and Twitter for this example.

It is important to note that this is just UIs, so no underline logic

## Structure of Code

Here is how our code looks like

```xml
<body class="bg-[#dfeeff] flex items-center justify-center min-h-screen">
<!-- First Layer -->
    <div class="w-full sm:max-w-md bg-white text-center px-10 pt-5 pb-10 relative rounded-xl [&_*]:transition-all [&_*]:ease-linear [&_*]:duration-200">
<!-- Second Layer -->
        <div>
                    <!-- Cross Icon -->
            <div class="text-4xl text-slate-400 top-5 right-5 absolute cursor-pointer"><iconify-icon icon="radix-icons:cross-2"></iconify-icon></div>
                    <!-- Header -->
            <div class="mt-5 mb-8">
                <h2 class="text-3xl font-bold mb-2">Sign Up</h2>
                <p class="text-sm w-[70%] mx-auto">Create an account to unlock all the beneftisto easily,
                     like or submit your favorite content
                </p>
            </div>
                    <!-- Third Parties -->
            <div class="[&>*]:flex [&>*]:items-center [&>*]:w-fit [&>*]:rounded-md [&>*]:border [&>*]:pl-4 [&>*]:pr-20 [&>*]:py-2 [&>*]:mx-auto [&>*]:my-2 [&>*]:text-sm [&>*:hover]:bg-[#dfeeff] [&>*]:cursor-pointer">
                <div>
                    <div class="text-2xl mr-2">
                        <iconify-icon icon="flat-color-icons:google"></iconify-icon>
                    </div>
                    <div>Sign up with Google</div>
                </div>

                <div>
                    <div class="text-xl text-blue-900 mr-2">
                        <iconify-icon icon="fa-brands:facebook-f"></iconify-icon>
                    </div>
                    <div>Sign up with Facebook</div>
                </div>

                <div>
                    <div class="text-xl mr-2">
                        <iconify-icon icon="logos:twitter"></iconify-icon>
                    </div>
                    <div>Sign up with Twitter</div>
                </div>
            </div>

            <div class="flex items-center gap-1 my-10">
                <input type="checkbox" >
                <p class="text-sm">I'm not interested in update about products and services</p>
            </div>
                    <!-- Sign Buttons -->
            <div class="text-blue-400 border border-transparent px-4 py-2 w-fit mx-auto rounded-md cursor-pointer hover:bg-blue-400 hover:text-white"><h2>Sign In</h2></div>
        </div>
    </div>

<script src="https://code.iconify.design/iconify-icon/1.0.2/iconify-icon.min.js"></script>    
</body>
```

Before explaining the whole code, it is worth saying that you can get all the icons used in this tutorial are from [iconify](http://iconify.design/)

* **Header**
    

To the header, we gave font-size of text-3xl for the upper header, and font-size of text-sm and a width of `w-[70%]` for the lower header. To the container holding everything we gave it a margin-block-start of `mt-5` and a margin-block-end of `mb-8`

* **Third Parties**
    

We grouped all the different signup third parties in the same container and applied to each of them the same stylings. This was possible through the TailwindCSS properties **\[&&gt;\*\].**

If you are used to my posts, by now you surely know the meaning of `[&>*]` in tailwindcss.

But if you are new, The property **\[&&gt;\*\]** simply means *“select each child individually”*, this allows us to apply the same styling properties to all the immediate children.

To each child, we gave them a display of flex and align-items of items-center. We also gave it a width of `w-fit`, border-radius of `rounded-md`, padding-inline-start of `pl-4`, padding-inline-end of `pr-20`, padding-block of `py-2`. Lastly, we gave it a margin-block of `my-2` and a hover effect which changes the background-color `[&>*:hover]:bg-[#dfeeff]`

To all the icons, we gave a font-size of `text-2xl`

* **Sign Up Button**
    

```xml
                    <!-- Sign Buttons -->
<div class="text-blue-400 border border-transparent px-4 py-2 w-fit mx-auto rounded-md cursor-pointer hover:bg-blue-400 hover:text-white">                       
        <h2>Sign In</h2>
</div>
```

For this SignUp Button, We gave it a text color of text-blue-400, a border-width that is initially transparent. We gave it a padding-inline of `px-4`, padding-block of `py-2`, border-radius of `rounded-md` and background-color changes on hover to `hover:bg-blue-500`

And that's principally it for the whole tutorial.


![End Result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/odky6p1jfvb2lgkfkmbe.png)



## Conclusion

We just built a simple and responsive Sign Up with Third Parties component without😃.

You can have a Live preview on [Codepen](https://codepen.io/mbianou-bradon/pen/poZjjmW) or find the code on [GitHub](https://github.com/mbianou-bradon/icodethis-daily-ui-challenge/tree/main/public/December%202022/Sign-up-third-parties)

Don’t hesitate to share with me if you were able to complete the tutorial on your end, I’d be happy to see any additions styling you added to your card.

If you have any worries or suggestions, don’t hesitate to leave them in the comment section! 😊

See ya! 👋