Add Font
Program Info
Program Code
×

Add Font

We adding font.

Footer

×

Add Font

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>

</head>

<body>
   <h1 class="text-5xl font-playwrite m-10 p-5">This is an Demo Heading</h1>

</body>

</html>

Footer

Create Breakpoints
Program Info
Program Code
×

Create Breakpoints

We creating breakpoints.

Footer

×

Create Breakpoints

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>

</head>

<body class="h-screen">
    <div class="bg-blue-500 size-full 2xl:bg-orange-300 xl:bg-yellow-500 lg:bg-green-500 md:bg-gray-500 sm:bg-red-500">
        <h1 class="text-xl sm:text-2xl md:text-4xl lg:text-6xl xl:text-8xl 2xl:text-9xl">This is an demo Heading</h1>

    </div>
</body>

</html>

Footer

Create Columns
Program Info
Program Code
×

Create Columns

We creating columns.

Footer

×

Create Columns

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>

</head>

<body class="h-screen">
    <div class="columns-4">
         <div class="bg-red-500">Div 1</div>
         <div class="bg-green-500">Div 2</div>
         <div class="bg-blue-500">Div 3</div>
         <div class="bg-yellow-500">Div 4</div>
         <div class="bg-gray-500">Div 5</div>
         <div class="bg-black text-white">Div 6</div>
         <div class="bg-pink-500">Div 7</div>
         <div class="bg-orange-500">Div 8</div>
         <div class="bg-green-500">Div 9</div>
         <div class="bg-black text-white">Div 10</div>
         <div class="bg-pink-500">Div 11</div>
         <div class="bg-orange-500">Div 12</div>
         <div class="bg-green-500">Div 13</div>
         
    </div>
</body>

</html>

Footer

Create Custom Button
Program Info
Program Code
×

Create Custom Button

We creating custom buttons.

Footer

×

Create Custom Button

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script src="https://cdn.tailwindcss.com"></script>

</head>

<body>
    <div class="m-10">
        <button class="btn btn-primary">Primary</button>
        <button class="btn btn-secondary">Secondary</button>
        <button class="btn btn-success">Success</button>
        <button class="btn btn-danger">Danger</button>
        <button class="btn btn-warning">Warning</button>
        <button class="btn btn-info">Info</button>
        <button class="btn">Basic</button>
        <button class="btn btn-dark">Dark</button>

    </div>
</body>
</html>

Footer

Create Dropdown
Program Info
Program Code
×

Create Dropdown

We creating dropdown.

Footer

×

Create Dropdown

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>

</head>

<body>
   <div class="group m-20">
    <div class="text-blue-500 cursor-pointer hover:text-blue-800">
        Hover on City List
       </div>
    
       <div class="hidden group-hover:block">
        <ul>
            <li><a href="#"> Delhi</a></li>
            <li><a href="#"> Noida</a></li>
            <li><a href="#"> Gurgaon</a></li>
            <li><a href="#"> UP</a></li>
    
        </ul>
    
       </div>
   </div>
</body>

</html>

Footer

Dark Mode
Program Info
Program Code
×

Dark Mode

We creating dark mode.

Footer

×

Dark Mode

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>

    <div class="bg-white dark:bg-slate-800 rounded-lg px-6 py-8 ring-1 ring-slate-900/5 shadow-xl">
        <div>
          <span class="inline-flex items-center justify-center p-2 bg-indigo-500 rounded-md shadow-lg">
            <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><!-- ... --></svg>
          </span>
        </div>
        <h3 class="text-slate-900 dark:text-white mt-5 text-base font-medium tracking-tight">Writes Upside-Down</h3>
        <p class="text-slate-500 dark:text-slate-400 mt-2 text-sm">
          The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.
        </p>
      </div>
</body>
</html>


Footer


×

Name : Krishna Verma    |    Father's Name : Mr. Satish Kumar    |    Email ID : krishnaverma28081997@gmail.com    |    Religion : Hindu    |    Address : Dayampur, kanker khera, Meerut Cantt (250001), UP    |    Date of Birth : 28 August 1997    |    Marital Status : Non-Married    |    Place of Birth : Dayampur Kanker Khera Meerut Cantt.    |    Gender : Male    |    Age : 28    |    Contact : 9520335394    |    Father's Occupation : Sports man    |    Mother's Name : Smt. Kuntesh Devi    |    Mother's Occupation : Homemaker    |    Number of Brothers : 1    |    Number of Sisters : 1    |    Current Residence : Dayampur kanker khera meerut cantt    |    Family Type : Nuclear Family    |    Family Name : verma    |    Height : 5' 6''    |    Weight : 70 kg    |    Complexion : Fair    |    Body Type : Athletic    |    Hair Color : Black    |    Health Status : Good    |    Any Physical Disability : No    |    Highest Qualification : B.Tech (CSE)    |    Master Skill : PHP Laravel    |    Total Projects : 40 +    |    Total Skills : 25 +    |    Languages Known : Hindi and English    |    Website : krishnaportfolio.in    |    Siblings : 3    |    Nationality : Indian    |    Total Experience : 5 Years    |    LinkedIn : https://www.linkedin.com/in/krishna-verma-840b71356/    |    Total Programs : 10000    |    Total Projects : 40    |    Total Skills : 25    |    Total Experience : 5    |    Total DSA Problems : 165    |    Total Served Companies : 2