nostr web components demo


hello,
<nostr-name
  class="text-amber-700 text-lg"
  pubkey="nprofile1qqsgfhhxuemwtwm8kjk5uppv7uxtmp5pz4wm2dv59lxx5pfnsk98ysqpz3mhxue69uhkummnw3ezummcw3ezuer9wcq3camnwvaz7tmwdaehgu3wvf5hgcm0d9hx2u3wwdhkx6tpds37vfju"
/>
    
hello,

<style>
  nostr-picture::part(img) {
    width: 200px;
    border: 18px solid gold;
  }
</style>
<nostr-picture
  class="border-amber-700 border-4 w-32"
  pubkey="nprofile1qqsgfhhxuemwtwm8kjk5uppv7uxtmp5pz4wm2dv59lxx5pfnsk98ysqpz3mhxue69uhkummnw3ezummcw3ezuer9wcq3camnwvaz7tmwdaehgu3wvf5hgcm0d9hx2u3wwdhkx6tpds37vfju"
/>
    

<style>
  nostr-event-json::part(pre) {
    background: gold;
    padding: 1rem;
  }
  nostr-event-json::part(key) {
    color: fuchsia;
    font-weight: bold;
  }
  nostr-event-json::part(kind) {
    font-size: 24px;
  }
  nostr-event-json::part(content) {
    font-style: italic;
  }
  nostr-event-json::part(id),
  nostr-event-json::part(pubkey),
  nostr-event-json::part(sig) {
    font-size: 9px;
  }
</style>
<nostr-event-json
  id="nevent1qqstnl4ddmhc0kzqpj7p543pvq9nvppc4laewc9x5ppucz7aagsa4dspzemhxue69uhhyetvv9ujumn0wd68ytnzv9hxgqgewaehxw309ac8junpd45kgtnxd9shg6npvchxxmmdqyv8wumn8ghj7un9d3shjtnndehhyapwwdhkx6tpdsds02v2"
/>