Webleb - Snippets de Código -

2329 ttmasteryi

Abrir no Editor Publique Seu Código

Recomendado

1 March 2025

Um código por gurbetshopelectronics

29 September 2024

efeito de revelação

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;
}

Recomendado

Um código por gurbetshopelectronics

efeito de revelação

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS