Published on

Ways To Make A Github Profile Page Clone+Javascript With Tailwind CSS In 60 Minutes

Tags
NavigationsPages
Github Profile Page Clone+Javascript

Github Profile Page is a great way to showcase your work and contributions to the community. It is an essential part of a developer's online presence. In this article, we will discuss how to create a Github Profile Page Clone+Javascript using Tailwind CSS in just 60 minutes.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that helps you create responsive and customizable user interfaces quickly. It provides a set of pre-defined CSS classes that you can use to style your HTML elements. Tailwind CSS is designed to be highly customizable, and you can configure it to match your project's design requirements.

The description of Github Profile Page Clone+Javascript ui component

The Github Profile Page Clone+Javascript UI component is a replica of the Github profile page. It includes all the essential elements of the Github profile page, such as the user's profile picture, bio, repositories, and followers. The UI component is built using HTML, CSS, and Javascript.

Why use Tailwind CSS to create a Github Profile Page Clone+Javascript ui component?

Tailwind CSS is an excellent choice for creating a Github Profile Page Clone+Javascript UI component because it provides a set of pre-defined CSS classes that you can use to style your HTML elements. This means you don't have to write custom CSS for every element, which saves a lot of time. Additionally, Tailwind CSS is highly customizable, which means you can easily modify the styles to match your project's design requirements.

The preview of Github Profile Page Clone+Javascript ui component.

To create a Github Profile Page Clone+Javascript UI component, we will use Tailwind CSS to style the HTML elements. Here is a preview of what the UI component will look like:

Free download of the Github Profile Page Clone+Javascript's source code

The source code of Github Profile Page Clone+Javascript ui component.

Here is the source code for the Github Profile Page Clone+Javascript UI component. We will use HTML, CSS, and Javascript to create this component.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>GitHub</title>
    <!-- <script src="tailwind.js"></script> -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link
      rel="icon"
      class="js-site-favicon"
      type="image/svg+xml"
      href="https://github.githubassets.com/favicons/favicon.svg"
    />
    <!-- <link rel="alternate icon" class="js-site-favicon" type="image/png" href="https://github.githubassets.com/favicons/favicon.png"> -->
  </head>
  <body class="" >
    <div id="navbar" class="w-full -mt-2">
      <nav class=" w-full top-0 flex justify-between items-center bg-gray-800 text-gray-50">
        <div class="flex items-center font-semibold">
          <img
            src="http://cdn.onlinewebfonts.com/svg/img_326384.png"
            class="hover:bg-gray-300 ml-8 mr-4 bg-white text-black w-8 h-8 rounded-full"
            height="260px" width="260px"
            
          />
          <input
            type="text"
            id="search"
            onkeypress="searchUser(event)"
            placeholder="Search or jump to"
            value="shaantanu9"
            class="pl-1 pt-2 w-64 border-r-0 outline-none hover:w-80 bg-gray-800 text-gray-50 border border-gray-500 rounded-lg rounded-r-none hover:bg-white hover:text-gray-900"
          />
          <div
            class="border border-gray-500 w-6 text-center h-8 rounded-r pl-1 pt-2 border-l-0 hover:bg-white"
          >
            <div
              class="border border-gray-500 w-6 text-center h-6 text-xs hover:bg-white rounded pl-1 pt-2 -ml-2 -mt-1"
            >
              /
            </div>
          </div>
          <a
            href=""
            class="p-2 py-5 font-md hover:text-gray-300 pointer:cursor text-sm mr-1 ml-1"
            >Pull requests</a
          >
          <a
            href=""
            class="p-2 py-5 font-md hover:text-gray-300 pointer:cursor text-sm mr-1"
            >Issues</a
          >
          <a
            href=""
            class="p-2 py-5 font-md hover:text-gray-300 pointer:cursor text-sm mr-1"
            >Marketplace</a
          >
          <a
            href=""
            class="p-2 py-5 font-md hover:text-gray-300 pointer:cursor text-sm mr-1"
            >Explore</a
          >
        </div>
        <div class="flex justify-between items-center mr-6">
          <div
            class="flex justify-center items-center mx-2 hover:text-gray-300"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-5 w-5 ml-3"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
              />
            </svg>

            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-3 w-3"
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              <path
                fill-rule="evenodd"
                d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                clip-rule="evenodd"
              />
            </svg>
          </div>
          <div
            class="flex justify-center items-center mx-2 hover:text-gray-300"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-5 w-5"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M12 6v6m0 0v6m0-6h6m-6 0H6"
              />
            </svg>
          </div>

          <div class="flex justify-center items-center">
            <div class="h-8 w-8 bg-red-500 rounded-full bg-image ">
                <img class="h-8 w-8 bg-gray-800 rounded-full bg-image" id="navImg" ></img></div>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-3 w-3"
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              <path
                fill-rule="evenodd"
                d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                clip-rule="evenodd"
              />
            </svg>
          </div>
        </div>
      </nav>
    </div>

    <div class=" mt-4 text-md flex items-center bg-white " >
        <div id="pageMenuTag" class=" flex items-center justify-between ml-40 "></div>
        <div id="pageMenuTag" class=" flex items-center justify-between w-96 ml-80 ">
                <!-- <div id="pageMenuTag" class=" flex items-center justify-between w-96 bottom-0 mr-24 ml-12 mb-12 "> -->
                <!-- <div id="pageMenuTag" class=" flex items-center justify-between w-full bottom-0 mr-64 ml-12 mb-12 divide-y divide-gray-800"> -->
                <a href="">Overview</a>
                <a href="">Repositories</a>
                <a href="">Project</a>
                <a href="">Package</a>
                <a href="">Stars</a>
        </div>    
    </div>

    
        <div class="flex">

            <div class="ml-12" >

                <img  id="imgAvatar" class="rounded-full"  alt="">
                <!-- <img src="https://avatars.githubusercontent.com/u/33876955?v=4" id="imgAvatar" class="rounded-full"  alt=""> -->
                <h1 class="text-3xl font-bold" id="fullName" >Shantanu Bombatkar</h1>
                <p class="text-gray-600" id="username" ></p>
                <p id="bio" class="  text-black text-lg"></p>
                <button class="rounded bg-gray-200 p-2 mt-6 mx-1/2">Edit Profile</button>
                <div class="flex justify-evenly mb-3 items-center">
                    <p  class="p-1" >Follower</p>
                    <p id="follower" class="p-1" ></p>
                    <p  class="p-1">Following</p>
                    <p id="following" class="p-1"></p>
                </div>
                <p id="company" class="p-1" >@shodkk</p>
                <p id="location" class="p-1" >India</p>
                <p id="blog" class="p-1" >https://shodkk.com</p>
                <h3></h3>
            </div>

            <div id="container" class="grid grid-cols-2 m-12 gap-6 mb-12 " style="height:300px" >
                <!-- <div id="mainWrapper" class=" shodow-inner shadow-lg border-t-2 m-3 mt-12 p-4 ">
                    <div id="nameVisibilityWrapper" class="flex mt-4 justify-between items-center">
                        <a href="" id="name" class="text-blue-600">Neural-Network-with-Python</a>
                        <button class=" bg-gray-200 w-12 mr-4 text-sm font-thin rounded-2xl" id="visibility" >Public</button>
                    </div>
                    <p class="text-sm">Forked from jiexunsee/Neural-Network-with-Python</p>
                    <p class="text-sm mt-12 " id="discription" >A neural network with 3 layers made with just numpy as dependency</p>
                    <div id="languageWrapper" class="flex justify-end">
                        <div class=" w-4 h-4 rounded-full bg-blue-900"></div>
                        <p id="language" >Python</p>
                    </div>
                 </div> -->
                
            </div>
        </div>
        <div class="mt-12" ></div>
    


        
      

  </body>
  <div class="ffooter"></div>
  
  <script>


// function searchUser(e) {
function searchUser(e) {

searchUsername = document.getElementById('search').value

e.key=="Enter"? getUser(searchUsername):console.log("Press Enter to Search")

}

async function getUser(searchUsername){

// console.log("object")
console.log("getUser")


baseUrl = `https://api.github.com/users/${searchUsername}/repos`;
baseUrl2 = `https://api.github.com/users/${searchUsername}`;

let data = await fetch(baseUrl);
let response = await data.json();

let data2 = await fetch(baseUrl2);
let response2 = await data2.json();


console.log(response)

getUserRepoData(response);
getUserData(response2);

}

function getUserData(arr){

console.log("getUserData")

// arr.forEach(({login,url,name,blog,compnay,location,bio,follower, following})=>{

document.getElementById('fullName').innerHTML = arr.name;
document.getElementById('username').innerHTML = arr.login;
document.getElementById('follower').innerHTML = arr.followers;
document.getElementById('following').innerHTML = arr.following;
document.getElementById('company').innerHTML = arr.company
document.getElementById('location').innerHTML = arr.location; 
document.getElementById('bio').innerHTML = arr.bio;
document.getElementById('blog').innerHTML = arr.blog; 

// });

}


function getUserRepoData(arr){


document.querySelector('#container').innerHTML = ""


console.log("getUserdata")

 document.querySelector('#imgAvatar').src =  arr[0].owner.avatar_url
 document.querySelector('#navImg').src =  arr[0].owner.avatar_url

arr.forEach(({name, html_url, language,description,visibility})=>{
  
  console.log(name)
//   console.log(name, html_url, language, description,visibility)

let mainWrapper = document.createElement("div");
mainWrapper.classList.add("shodow-inner", "shadow-lg", "border-t-2","m-3","mt-12","p-4")

let nameVisibilityWrapper = document.createElement("div");
nameVisibilityWrapper.classList.add("flex","mt-4","justify-between","items-center")

let nameA= document.createElement("a");
nameA.classList.add("text-blue-600");
nameA.innerHTML = name;
nameA.href = html_url;

let visibilityBtn=document.createElement("button");
visibilityBtn.classList.add("bg-gray-200","w-12","mr-4","text-sm","font-thin","rounded-2xl")
visibilityBtn.innerHTML = visibility

nameVisibilityWrapper.append(nameA,visibilityBtn);

let descriptionP = document.createElement("p");
descriptionP.classList.add("text-sm","mt-12")
descriptionP.innerHTML = description

let languageWrapper = document.createElement("div");
languageWrapper.classList.add("flex","justify-end")
// languageWrapper.innerHTML =

let circleD = document.createElement("div");
circleD.classList.add("w-4","h-4","rounded-full","bg-blue-900")

let languageP = document.createElement("p");
languageP.innerHTML = language
// language.classList.add("")

languageWrapper.append(circleD, languageP)

mainWrapper.append(nameVisibilityWrapper, descriptionP,languageWrapper)
// console.log(mainWrapper)
document.querySelector('#container').append(mainWrapper);

})

let footerdiv = `<div id="footer" class="bottom-0 mr-64 ml-12 mb-12 divide-y divide-gray-800" style="bottom:0px; position: absolute;" > 
    <!-- <div id="footer" class="bottom-0 mr-64 ml-12 mb-12 divide-y divide-gray-800"> -->
      <footer class=" bottom-0 flex flex items-center justify-between">
        <div class="flex items-center mr-12">
          <div class="">
            <img
              src="https://github.githubassets.com/favicons/favicon.svg"
              class="hover:bg-gray-300 bg-gray-50 ml-8 mr-4 bg-white text-black w-6 h-6 rounded-full"
              alt=""
            />
          </div>
          <p class="text-sm text-gray-500">© 2022 GitHub, Inc.</p>
        </div>
        <!-- <div>    
      <a class="text-blue-500 text-sm" href="" >Terms</a>
    </div> -->
        <!-- <div> -->
        <a class="text-blue-500 text-xs hover:underline" href="/">Terms</a>
        <a class="text-blue-500 text-xs hover:underline" href="/">Privacy</a>
        <a class="text-blue-500 text-xs hover:underline" href="/">Security</a>
        <a class="text-blue-500 text-xs hover:underline" href="/">Status</a>
        <a class="text-blue-500 text-xs hover:underline" href="/">Docs</a>
        <a class="text-blue-500 text-xs hover:underline" href="/">Contact GitHub</a>
        <a class="text-blue-500 text-xs hover:underline" href="/">Pricing</a>
        <a class="text-blue-500 text-xs hover:underline" href="/">API</a>
        <a class="text-blue-500 text-xs hover:underline" href="/">Training</a>
        <a class="text-blue-500 text-xs hover:underline" href="/">Blog</a>
        <a class="text-blue-500 text-xs hover:underline" href="/">About</a>
        <!-- </div> -->
      </footer>
    </div>`


// // div.innerHTML =footerdiv
    // document.querySelector('.ffooter').innerHTML = footerdiv;


}

  </script>

</html>

How to create a Github Profile Page Clone+Javascript with Tailwind CSS?

To create a Github Profile Page Clone+Javascript UI component, follow these steps:

  1. Create a new HTML file and add the required HTML elements, such as the user's profile picture, bio, repositories, and followers.
  2. Link the Tailwind CSS stylesheet to your HTML file.
  3. Add the required Tailwind CSS classes to style your HTML elements.
  4. Use Javascript to fetch the user's data from the Github API and update the HTML elements dynamically.

Let's dive into each step in more detail.

Step 1: Create a new HTML file and add the required HTML elements

Create a new HTML file and add the required HTML elements to create the Github Profile Page Clone+Javascript UI component. Here is an example of what the HTML file should look like:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Github Profile Page Clone+Javascript</title>
  </head>
  <body>
    <div class="container mx-auto">
      <header class="flex items-center justify-between mb-4">
        <div class="flex items-center">
          <img
            class="h-16 w-16 rounded-full mr-4"
            src="https://avatars.githubusercontent.com/u/1?v=4"
            alt="User Avatar"
          />
          <h1 class="text-2xl font-bold">torvalds</h1>
        </div>
        <nav>
          <ul class="flex items-center">
            <li>
              <a
                class="text-gray-600 hover:text-gray-800 px-3 py-2 rounded"
                href="#"
                >Repositories</a
              >
            </li>
            <li>
              <a
                class="text-gray-600 hover:text-gray-800 px-3 py-2 rounded"
                href="#"
                >Followers</a
              >
            </li>
            <li>
              <a
                class="text-gray-600 hover:text-gray-800 px-3 py-2 rounded"
                href="#"
                >Following</a
              >
            </li>
          </ul>
        </nav>
      </header>
      <main class="flex">
        <div class="w-1/3">
          <h2 class="text-lg font-bold mb-4">torvalds's Bio</h2>
          <p class="text-gray-700">
            Linus Benedict Torvalds is a Finnish-American software engineer who
            is the creator and, historically, the principal developer of the
            Linux kernel, which is the kernel for Linux operating systems
          </p>
        </div>
        <div class="w-2/3">
          <h2 class="text-lg font-bold mb-4">torvalds's Repositories</h2>
          <div class="grid grid-cols-2 gap-4">
            <div class="bg-white rounded-lg shadow-md p-4">
              <h3 class="text-lg font-bold mb-2">linux</h3>
              <p class="text-gray-700">
                Linux kernel source tree
              </p>
            </div>
            <div class="bg-white rounded-lg shadow-md p-4">
              <h3 class="text-lg font-bold mb-2">git</h3>
              <p class="text-gray-700">
                Git Source Code Mirror - This is a publish-only repository and
                all pull requests are ignored. Please follow Documentation/SubmittingPatches
                procedure for any of your improvements.
              </p>
            </div>
            <div class="bg-white rounded-lg shadow-md p-4">
              <h3 class="text-lg font-bold mb-2">linux-next</h3>
              <p class="text-gray-700">
                The linux-next.git repository for testing next-20210607
              </p>
            </div>
            <div class="bg-white rounded-lg shadow-md p-4">
              <h3 class="text-lg font-bold mb-2">linux-2.6</h3>
              <p class="text-gray-700">
                Linux kernel source tree
              </p>
            </div>
          </div>
        </div>
      </main>
    </div>
  </body>
</html>

To use Tailwind CSS, you need to link its stylesheet to your HTML file. You can either download the stylesheet and link it locally or use a CDN to link it. Here is an example of how to link the Tailwind CSS stylesheet using a CDN:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Github Profile Page Clone+Javascript</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.4/tailwind.min.css"
      integrity="sha512-7+5X5a1z3jgSfQ6h9Nzv4eLdZfUc9hH5KJQ2vFhGQJQJ6v0v6l5Xvz2+1xJ6lGx6LzJgIzUy1VbPqj4Kj4Z6g=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
  </head>
  ...

Step 3: Add the required Tailwind CSS classes to style your HTML elements

Tailwind CSS provides a set of pre-defined CSS classes that you can use to style your HTML elements. Here is an example of how to use Tailwind CSS classes to style the HTML elements:

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
  </head>
  <body>
    <div class="container mx-auto">
      <header class="flex items-center justify-between mb-4">
        <div class="flex items-center">
          <img
            class="h-16 w-16 rounded-full mr-4"
            src="https://avatars.githubusercontent.com/u/1?v=4"
            alt="User Avatar"
          />
          <h1 class="text-2xl font-bold">torvalds</h1>
        </div>
        <nav>
          <ul class="flex items-center">
            <li>
              <a
                class="text-gray-600 hover:text-gray-800 px-3 py-2 rounded"
                href="#"
                >Repositories</a
              >
            </li>
            <li>
              <a
                class="text-gray-600 hover:text-gray-800 px-3 py-2 rounded"
                href="#"
                >Followers</a
              >
            </li>
            <li>
              <a
                class="text-gray-600 hover:text-gray-800 px-3 py-2 rounded"
                href="#"
                >Following</a
              >
            </li>
          </ul>
        </nav>
      </header>
      <main class="flex">
        <div class="w-1/3">
          <h2 class="text-lg font-bold mb-4">torvalds's Bio</h2>
          <p class="text-gray-700">
            Linus Benedict Torvalds is a Finnish-American software engineer who
            is the creator and, historically, the principal developer of the
            Linux kernel, which is the kernel for Linux operating systems
          </p>
        </div>
        <div class="w-2/3">
          <h2 class="text-lg font-bold mb-4">torvalds's Repositories</h2>
          <div class="grid grid-cols-2 gap-4">
            <div class="bg-white rounded-lg shadow-md p-4">
              <h3 class="text-lg font-bold mb-2">linux</h3>
              <p class="text-gray-700">
                Linux kernel source tree
              </p>
            </div>
            <div class="bg-white rounded-lg shadow-md p-4">
              <h3 class="text-lg font-bold mb-2">git</h3>
              <p class="text-gray-700">
                Git Source Code Mirror - This is a publish-only repository and
                all pull requests are ignored. Please follow Documentation/SubmittingPatches
                procedure for any of your improvements.
              </p>
            </div>
            <div class="bg-white rounded-lg shadow-md p-4">
              <h3 class="text-lg font-bold mb-2">linux-next</h3>
              <p class="text-gray-700">
                The linux-next.git repository for testing next-20210607
              </p>
            </div>
            <div class="bg-white rounded-lg shadow-md p-4">
              <h3 class="text-lg font-bold mb-2">linux-2.6</h3>
              <p class="text-gray-700">
                Linux kernel source tree
              </p>
            </div>
          </div>
        </div>
      </main>
    </div>
  </body>
</html>

Step 4: Use Javascript to fetch the user's data from the Github API and update the HTML elements dynamically

To fetch the user's data from the Github API and update the HTML elements dynamically, we will use Javascript. Here is an example of how to use Javascript to fetch the user's data and update the HTML elements:

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
  </head>
  <body>
    <div class="container mx-auto">
      <header class="flex items-center justify-between mb-4">
        <div class="flex items-center">
          <img
            class="h-16 w-16 rounded-full mr-4"
            src=""
            alt="User Avatar"
          />
          <h1 class="text-2xl font-bold"></h1>
        </div>
        <nav>
          <ul class="flex items-center">
            <li>
              <a
                class="text-gray-600 hover:text-gray-800 px-3 py-2 rounded"
                href="#"
                >Repositories</a
              >
            </li>
            <li>
              <a
                class="text-gray-600 hover:text-gray-800 px-3 py-2 rounded"
                href="#"
                >Followers</a
              >
            </li>
            <li>
              <a
                class="text-gray-600 hover:text-gray-800 px-3 py-2 rounded"
                href="#"
                >Following</a
              >
            </li>
          </ul>
        </nav>
      </header>
      <main class="flex">
        <div class="w-1/3">
          <h2 class="text-lg font-bold mb-4"></h2>
          <p class="text-gray-700"></p>
        </div>
        <div class="w-2/3">
          <h2 class="text-lg font-bold mb-4"></h2>
          <div class="grid grid-cols-2 gap-4"></div>
        </div>
      </main>
    </div>
    <script>
      const user = "torvalds";
      const url = `https://api.github.com/users/${user}`;

      fetch(url)
        .then((response) => response.json())
        .then((data) => {
          const avatar = document.querySelector("img");
          const name = document.querySelector("h1");
          const bio = document.querySelector(".w-1/3 p");

          avatar.src = data.avatar_url;
          name.textContent = data.name;
          bio.textContent = data.bio;
        })
        .catch((error) => console.log(error));
    </script>
  </body>
</html>

Conclusion

In this article, we discussed how to create a Github Profile Page Clone+Javascript UI component using Tailwind CSS in just 60 minutes. We covered the steps required to create the UI component, including creating the HTML file, linking the Tailwind CSS stylesheet, adding the required Tailwind CSS classes, and using Javascript to fetch the user's data from the Github API and update the HTML elements dynamically. With Tailwind CSS, creating a Github Profile Page Clone+Javascript UI component is quick and easy.