Add some style

package.json

@@ -18,5 +18,6 @@
 	},
 	"eslintConfig": {
 		"extends": "preact"
-	}
+	},
+	"packageManager": "yarn@1.22.21+sha1.1959a18351b811cdeedbd484a8f86c3cc3bbaf72"
 }

src/index.tsx

@@ -1,6 +1,6 @@
 import { render } from 'preact';
 import { useState, useEffect } from 'preact/hooks';
-
+import './style.css'
 const EVENTS = 'https://api.kommunity.com/api/v1/faith-in-tech/events?&page=1'
 function Example() {
 	const [items, setItems] = useState([]);
@@ -35,11 +35,11 @@ function Example() {
 
 function UserList({ users, slug }) {
 	return (
-		<ul class="user-items">
+		<div class="user-items">
 			{users.map((user) => (
-				<li><a href={`/faith-in-tech/events/${slug}/attendees`} class=""><img src={user.avatar} class="mini-avatar" /></a></li>
+				<a href={`/faith-in-tech/events/${slug}/attendees`} class=""><img src={user.avatar} class="mini-avatar" /></a>
 			))}
-		</ul>
+		</div>
 	)
 }
 

src/style.css

@@ -91,3 +91,16 @@ section {
     margin-left: -15px;
 }
 
+ul.user-items {
+    display: flex;
+}
+img.mini-avatar {
+    height: 40px;
+    width: 40px;
+    border-radius: 50%;
+	margin-left: -10px;
+}
+
+img.mini-avatar:first {
+	margin-left: 0;
+}