Etiqueta de Búsqueda

Abrir en el editor Publica tu código

Recomendado

14 September 2024

Galería de controles deslizantes de League of Legends

3 July 2025

<!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

Calculadora sencilla

Galería de controles deslizantes de League of Legends

Ruleta de decisiones

HTML

CSS

JS

Recomendado

Calculadora sencilla

Galería de controles deslizantes de League of Legends

Ruleta de decisiones

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS