Circular Avatars

PHOTO

Sat Sep 11 2021 21:05:03 GMT+0000 (UTC)

Saved by @mtsit #undefined

<div class="flex space-x-">
2
  <div class="relative w- h-12">

    <img class="rounded-full border border-gray-0 shadow-sm" src="https://randomuser.me/api/portraits/women/1.jpg" alt="user image" />

    <div class="absolute top-0 right-0 h-3 w-3 my-1 border-2 border-white rounded-full bg-green-400 z-2"></div>

  </div>



  <div class="relative w- h-16">
8
    <img class="rounded-full border border-gray-100 shadow-sm" src="https://randomuser.me/api/portraits/women/81.jpg" alt="user image" />

    <div class="absolute top-0 right-0 h-4 w-4 my-1 border-2 border-white rounded-full bg-green-400 z-2"></div>
10
  </div>


12
  <div class="relative w-24 h-24">

    <img class="rounded-full border border-gray-100 shadow-sm" src="https://randomuser.me/api/portraits/women/81.jpg" alt="user image" />

    <div class="absolute top-0 right-0 h-6 w-6 my-1 border-4 border-white rounded-full bg-green-400 z-2"></div>

  </div>
16
</div>



<div class="flex space-x-2">

  <div class="relative w-12 h-12">

    <img class="rounded-full border border-gray-100 shadow-sm" src="https://randomuser.me/api/portraits/women/81.jpg" alt="user image" />

https://codepen.io/oidre/pen/ExPaaEJ

Save snippets that work from anywhere online with our extensions

Available in the Chrome Web Store

Get Firefox Add-on

Get VS Code extension

Comments

More like this

tailwind

@mtsit

Search snippet Cards | Tailwind Templates big Cards | Tailwind Templates Cards | Tailwind Templates full image card | Tailwind Templates Auth+ Tails - Tailwind - Product Details Page Tailwind - SearchUI Tailwind Toolbox - Centered Page Circular Avatars

add property to each object in array javascript using ".map()" Code Example

Results.map(obj=> ({ ...obj, Active: 'false' }))

#undefined #child

Edit Themes ‹ Bruna Carolina Santos — WordPress

/*
Theme Name:     Twenty Seventeen Child
Theme URI:      https://wordpress.org/themes/twentyseventeen-child/
Description:    Tema Child per il tema Twenty Thirteen
Author:         Bruna Carolina Santos
Author URI:     
Template:       twentyseventeen
Version:        2.8-wpcom
*/

Edit Themes ‹ Bruna Carolina Santos — WordPress

Customiser Dark Theme

<style>
  /* Root Variables */
  
    :root {
      --fd_Font: inherit;
      --fd_Dark: #ffffff;
      --fd_Bodytext: #d1d1d1;
      --fd_Subtletext: #b7b7b7;
      --fd_Disabledtext: #7d7d7d;
      --fd_Light: #ababab;
      --fd_Pale: #4f4f4f;
      --fd_Background: #000000;
      --fd_Danger: #D80034;
      --fd_Warning: #FF5B21;
      --fd_Success: #1EBA63;
      --fd_Info: #4E65E1;
      --fd_Transparent: transparent;
    }
  </style>
  <link rel="stylesheet" href="https://d2bzmcrmv4mdka.cloudfront.net/production/ordering-system/chromeExtension/production-v1.min.css">

<div class="msgBox msgBox__container bg-light-grey">

  

  <section class="topBar bg-grey">

    <a href="#" class="round arrowBox bg-white"><div class="arrow down"></div></a>

  </section>

  

  <section class="user">

    <div class="avatarBox">

        <img class="round avatar" src="https://lh3.googleusercontent.com/DzXJfgqnFZmEOerX1XWEBm5F0udVmtx7Wkl6WSmL1in8fzHhZAml4hGERWmFh0buKmGUTeIttb9Go6sRjmE=rw">

      <div class="user__status round bg-pink"></div>

    </div>

    <div class="user__nameContainer">

      <div class="user__detail mid-grey">Kerem Suer</div>

      <div class="user__detail light-grey">Contributor</div>

    </div>

    <button class="btn">Block</button>

  </section>



  <section class="user">

    <div class="avatarBox">

        <img class="round avatar" src="https://lh3.googleusercontent.com/DzXJfgqnFZmEOerX1XWEBm5F0udVmtx7Wkl6WSmL1in8fzHhZAml4hGERWmFh0buKmGUTeIttb9Go6sRjmE=rw">

Centrar Imagen - FlexBox

// NO JS

find out whether the radio button is checked, or not

<!DOCTYPE html>
<html>
<body>

Radio button:<input type="radio" id="myRadio" checked>

<p>Click the "Try it" button to find out whether the radio button is checked, or not.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("myRadio").checked;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

Untitled1 - Jupyter Notebook

model training and testing

Light and Dark theme React with Less and CSS variables

const LIGHT_THEME = 'light-theme';

const DARK_THEME = 'dark-theme';



const ThemeContext = React.createContext();



function ThemeWrapper({ children }) {

  const [theme, setTheme] = React.useState(LIGHT_THEME);

  

  const applyTheme = (newTheme) => {

    document.getElementById('app').className = newTheme;

    setTheme(newTheme);

  }

  

  return (

    <ThemeContext.Provider value={{ theme, applyTheme }}>

      {children}

    </ThemeContext.Provider>

  )

}

Simple React Dark Mode.

function Header() {

  const [ darkMode, setDarkMode ] = React.useState(false)

   

  React.useEffect(() => {

    const body = document.body

    const toggle = document.querySelector('.toggle-inner')

    

    // If dark mode is enabled - adds classes to update dark-mode styling.

    // Else, removes and styling is as normal.

    if( darkMode === true ) {

      body.classList.add('dark-mode')

      toggle.classList.add('toggle-active')

    } else {

      body.classList.remove('dark-mode')

      toggle.classList.remove('toggle-active')

    }

  }, [darkMode])

  

  return (

Copy/paste contacts

mobile menu close

<script>
    jQuery(document).ready(function() {

        jQuery("#dd-menu-mobile ul li a").attr("onclick", "menuClose()");
        jQuery(".dd-cta-close").attr("onclick", "menuClose()");

    });

    function menuClose() {
        var element = document.getElementById("dd-section");
        element.classList.toggle("dd-m-menu");
    }

</script>

Slick Carousel smooth scroll

$('#gallery').slick({

  slidesToShow: ,

  slidesToScroll: 1,

  autoplay: true,

  autoplaySpeed: 0,
6
  speed: 000,

  pauseOnHover: false,
8
  cssEase: 'linear'

});

filter array with rest operator

https://jsbin.com/

# creak-engine

Browse more snippets >>