Webleb - fragmentos de código - Etiqueta de Búsqueda

HTML

<!DOCTYPE html>




<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Search Tag</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" integrity="sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
        
            <div class="wrapper">
                <h2 class="title">Search Tag</h2>
                <div class="content">
                   
                    <input type="text" placeholder="Type and Enter"> 
                </div>
                <button class="remove-all">Remove All</button>
                
            </div>  
    </body>
    <script src="app.js" ></script>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;1,100;1,200;1,300;1,400&display=swap');
:root{
    --primary-color:#8cc84c;
}
*{
    margin: 0;
    padding:0;
    box-sizing:border-box;

}
body{
    font-family: 'Poppins';
    background: #8cc84c;
    display:flex;
    justify-content: center;
    align-items: center;
    height:100vh;
}
.wrapper{
    background: white;
    border-radius: 10px;
    width: 400px;
    padding:20px;
}
.title{
    font-size: 22px;
}
.content{
    border: 1px solid #888;
    padding: 10px;
    display:flex;
    flex-wrap: wrap;
    margin-top: 20px;
    border-radius: 5px;

}
.content li{
    background: #8cc84c;
    color:white;
    border-radius: 3px;   
    list-style: none;
    margin:4px 3px;
    padding:10px;
}
.content li i{
    font-size: 16px;
    margin-left: 5px;
    cursor: pointer;
}
.content input{
    border:none;
    outline: none;
    font-size: 20px;
    margin:10px;
    flex:1;
}
.remove-all{
    background: var(--primary-color);
    border:none;
    outline: none;
    border-radius: 5px;
    color:white;
    padding: 10px 20px;
    font-size: 16px;
    margin-top:20px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.remove-all:hover{
    background: #7cac49;
}

Etiqueta de Búsqueda

Recomendado

editor

Formulario de inicio de sesión animado

Ejecutar, ejecutar jsjs

HTML

CSS

JS

Recomendado

editor

Formulario de inicio de sesión animado

Ejecutar, ejecutar jsjs

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS